div left and right-aligned on large devices, stacked on small

Question

Is there a way, without using bootstrap grid, to:

On larger devices

div.left left-aligned in .header-wrapper
div.right right-aligned in .header-wrapper

On small device

stack div.left and div.right on top of each other

<div class="container">
  <div class="header-wrapper">

    <div class="left"> This is some longer text that may not fit in-line with buttons</div>
    <div class="right">
      <a type="button" class="btn btn-default">Table</a>
      <a type="button" class="btn btn-default">Charts</a>
    </div>
  </div>

  <p>Some content here</p>

  <div class="header-wrapper">
    <div class="in-line">
      This would be an inline example
    </div>
    <div class="in-line">
      Divs will stack without media queries
    </div>
  </div>
</div>

Is it possible without media queries? for example using inline-block on .left .right would take care of stacking. (see inline-example in html code)

Is it possible to left/right align inline-block divs?

Look into css media queries, thats what bootstrap grid does;) — thsorens, Jan 20 '16 at 18:05
Refer this answer: http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile — Venkat.R, Jan 20 '16 at 18:06
Yes - write your own CSS & media queries. You basically wrote pseudocode for the process by writing this question. — mc01, Jan 20 '16 at 18:07
I know I am repeating everyone here, but USE MEDIA QUERYS. You can find a tutorial at http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries. Or, you could use foundation or w3.css. You can find tutorials for those at http://www.w3schools.com/ — , Jan 20 '16 at 18:07
Float the left/right columns left with a width of 50%. Use media queries to make the width 100% when you reach your small screen width. — Sam, Jan 20 '16 at 18:07
would it be possible without media queries? for example using inline-block would take care of stacking divs when they do not fit. See edited question — klode, Jan 20 '16 at 18:20

score 1 · Answer 1 · answered Jan 20 '16 at 18:32

As everyone else has said, you need to use media queries.

Try this (obviously change sizes to your liking):

.header-wrapper { width: 100%; }
.header-wrapper > div { width: 200px; height: 50px; }
.left { background: blue; float: left; }
.right { background: red; float: right; }

@media screen and (max-width: 768px ) { 
   .right { 
      float:left; 
      clear: left; 
   } 
}

On screens smaller than 769px, the box with class .right will get float: left; applied to it, which will cause it to, well, float left. The clear: left; will cause it to stack underneath the div with class .left.

zer00ne · Answer 2 · 2016-01-20T20:49:14.797

I'm probably not groking what your'e saying, so I used a little flexbox and one media query, it looks like what I think you wanted. If not, let me know. BTW, I used to hate media queries because it's syntax was weird and smelled funny, but I came to the conclusion that they are here for a good reason.

http://jsfiddle.net/zer00ne/p7rbpuac/

Changes

.header-wrapper {
  border: 1px solid green;
  display: flex;
  justify-content: space-between;
}

 @media screen and (max-width:360px) {
   .header-wrapper {

  display: flex;
  flex-direction: column;
  justify-content: center;
  }
 }

div left and right-aligned on large devices, stacked on small

2 Answers2

Changes