How to float: up/down from left/right between when breakpoint meets?

Problem

i need to create a layout two column container with the following criteria, please advice:

On Desktop View:

  1. Content position left and will flow below the sidebar on the right when it's longer than sidebar's height.
  2. Sidebar position right.

On Mobile View:

  1. Content flow on top
  2. Sidebar flow below Content box

Minimum Browser Support:

IE8

Breakpoints

max-width: 768px

Problem

The problem that i had was sidebar will always goes to the top of the content instead of below.

Additional Notes

I know this will work if i declare the content div container before the sidebar having both float left will work but that's not the result that i want be cause i want the content overflow around the sidebar when it's longer than the sidebar's height. Solution must be CSS and HTML only. no JS

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container">
    <div id="sidebar" class="cf">
      <span class="sidebar-heading">Sidebar</span>
    </div> <!-- sidebar -->
    <div id="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non porttitor lectus. Suspendisse potenti. Donec porttitor libero id mauris dapibus, vulputate accumsan justo aliquam. Curabitur vel laoreet enim, ac vulputate nibh. In vulputate arcu augue, id vulputate quam volutpat id. Sed suscipit metus eget turpis bibendum viverra.</p> 

      <p>Donec ornare vestibulum congue. Nullam sed egestas ipsum, eget maximus tellus. Pellentesque tristique leo ac ligula dignissim rutrum. Aenean accumsan nibh augue, nec maximus lorem dictum scelerisque. Nulla commodo nisl justo, vel iaculis magna tristique a. Quisque eleifend urna nibh, in dictum nisl auctor nec. Maecenas venenatis nec tellus at lobortis. Sed in turpis sit amet elit sagittis accumsan ac hendrerit purus. Nulla et nibh vel turpis lacinia efficitur id non erat.</p>

      <p>Curabitur aliquet, eros non facilisis sagittis, felis dolor consequat augue, vel tempus sem nisi vitae odio. Duis maximus arcu id enim egestas bibendum. Sed eleifend ex et accumsan fermentum. Vivamus varius sapien vel rutrum vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque eget ornare tortor. </p>

      <p>Nunc sollicitudin euismod ex. Vestibulum lobortis libero sit amet tortor rhoncus, eu mollis augue pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id diam interdum, sodales purus in, ultricies libero. Vestibulum at dapibus erat. Mauris aliquam nulla risus, volutpat egestas est porta vitae. Quisque ultrices nulla vel mattis sagittis. Nam ornare risus arcu, in fermentum sapien pulvinar vel. Nullam ornare euismod lectus in sollicitudin. Sed ac sapien ligula.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non porttitor lectus. Suspendisse potenti. Donec porttitor libero id mauris dapibus, vulputate accumsan justo aliquam. </p>
      <p>Curabitur vel laoreet enim, ac vulputate nibh. In vulputate arcu augue, id vulputate quam volutpat id. Sed suscipit metus eget turpis bibendum viverra.</p> 

      <p>Donec ornare vestibulum congue. Nullam sed egestas ipsum, eget maximus tellus. Pellentesque tristique leo ac ligula dignissim rutrum. Aenean accumsan nibh augue, nec maximus lorem dictum scelerisque.</p> 
      <p>Nulla commodo nisl justo, vel iaculis magna tristique a. Quisque eleifend urna nibh, in dictum nisl auctor nec. Maecenas venenatis nec tellus at lobortis. Sed in turpis sit amet elit sagittis accumsan ac hendrerit purus. Nulla et nibh vel turpis lacinia efficitur id non erat.</p>
    </div> <!-- #content -->
  </div><!-- #container -->

  <div class="other-content black cf">
    <div class="other-content-inner">
    <p>Nunc sollicitudin euismod ex. Vestibulum lobortis libero sit amet tortor rhoncus, eu mollis augue pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id diam interdum, sodales purus in, ultricies libero. Vestibulum at dapibus erat. Mauris aliquam nulla risus, volutpat egestas est porta vitae. Quisque ultrices nulla vel mattis sagittis. Nam ornare risus arcu, in fermentum sapien pulvinar vel. Nullam ornare euismod lectus in sollicitudin. Sed ac sapien ligula.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non porttitor lectus. Suspendisse potenti. Donec porttitor libero id mauris dapibus, vulputate accumsan justo aliquam. </p>
      <p>Curabitur vel laoreet enim, ac vulputate nibh. In vulputate arcu augue, id vulputate quam volutpat id. Sed suscipit metus eget turpis bibendum viverra.</p> 

      <p>Donec ornare vestibulum congue. Nullam sed egestas ipsum, eget maximus tellus. Pellentesque tristique leo ac ligula dignissim rutrum. Aenean accumsan nibh augue, nec maximus lorem dictum scelerisque.</p> 
    </div><!-- .other-content-inner -->
  </div><!-- .other-content -->
</body>
</html>

CSS

    #container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  background: #f3f3f3;
}

.cf:before,
.cf:after {
  content: '';
  display: table;
}

.cf:after {
  clear: both;
}

.other-content {
  display: block;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.other-content-inner {
  padding: 15px;
}

.black {
  background: #000;
  color: #fff;
}

#sidebar {
  float: right;
  width: 300px;
  height: 500px;
  background: yellow;
  margin: 0 0 30px 30px;
  position: relative;
}

.sidebar-heading {
  font-weight:bold;
  font-size: 30px;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom:0;
  top:0;
  margin: auto;
  height: 30px;
}

#content {
  display: inline;
}

@media only screen and (max-width: 768px) {
  #sidebar {
    width: 100%;
  }
}

Click here to view my code

Problem courtesy of: Wei

Solution

Let us look at the problem in a different way:

  • The source order is sidebar, content, footer; which works for desktop and must not be changed
  • The display order on mobiles should be content, sidebar, footer

We can use CSS flex box to alter the order in which the divs are displayed.

#container {
  margin: 0 auto;
  max-width: 960px;
}
#sidebar {
  float: right;
  margin: 0 0 30px 30px;
  width: 300px;
  background: #FFFF00;
}
#content {
  background: #F3F3F3;
}
#footer {
  background: #000000;
  color: #FFFFFF;
}
@media only screen and (max-width: 768px) {
  #container {
    display: flex;
    flex-direction: column;
  }
  #sidebar {
    float: none;
    margin: 0;
    width: auto;
    order: 2;
  }
  #content {
    order: 1;
  }
  #footer {
    order: 3;
  }
}
<div id="container">
  <div id="sidebar">
    <p style="text-align: center; font-weight: bold;">Use <em>Full page</em> button to view <em>Desktop</em> version</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Immo videri fortasse. Quae cum dixisset, finem ille.</p>
    <p>Sed ad bona praeterita redeamus. Tuo vero id quidem, inquam, arbitratu. Ea possunt paria non esse. Duo Reges: constructio interrete. Certe, nisi voluptatem tanti aestimaretis. Res enim concurrent contrariae. Quid adiuvas? Eadem nunc mea adversum te oratio est. Aliter homines, aliter philosophos loqui putas oportere?</p>
  </div>
  <div id="content">
    <p>Sed virtutem ipsam inchoavit, nihil amplius. Cur iustitia laudatur? Quis Aristidem non mortuum diligit? Quid censes in Latino fore?</p>
    <p>Id Sextilius factum negabat. Beatus sibi videtur esse moriens. Sumenda potius quam expetenda. Nunc omni virtuti vitium contrario nomine opponitur. Reguli reiciendam; At certe gravius. Contemnit enim disserendi elegantiam, confuse loquitur. Ego vero isti, inquam, permitto. Contemnit enim disserendi elegantiam, confuse loquitur.</p>
    <p>Beatus sibi videtur esse moriens. Facete M. Id enim natura desiderat.</p>
  </div>
  <div id="footer">
    <p>Polycratem Samium felicem appellabant. Faceres tu quidem, Torquate, haec omnia; Efficiens dici potest. Venit ad extremum; Quid, de quo nulla dissensio est?</p>
    <p>Praeclare hoc quidem. Sed haec omittamus; Sed videbimus.</p>
  </div>
</div>

In older browsers you can use display: table-* to achieve similar result:

#container {
  margin: 0 auto;
  max-width: 960px;
}
#sidebar {
  float: right;
  margin: 0 0 30px 30px;
  width: 300px;
  background: #FFFF00;
}
#content {
  background: #F3F3F3;
}
#footer {
  background: #000000;
  color: #FFFFFF;
}
@media only screen and (max-width: 768px) {
  #container {
    display: table;
    width: 100%;
  }
  #sidebar {
    float: none;
    margin: 0;
    width: auto;
    display: table-row-group;
  }
  #content {
    display: table-header-group;
  }
  #footer {
    display: table-footer-group;
  }
}
<div id="container">
  <div id="sidebar">
    <p style="text-align: center; font-weight: bold;">Use <em>Full page</em> button to view <em>Desktop</em> version</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Immo videri fortasse. Quae cum dixisset, finem ille.</p>
    <p>Sed ad bona praeterita redeamus. Tuo vero id quidem, inquam, arbitratu. Ea possunt paria non esse. Duo Reges: constructio interrete. Certe, nisi voluptatem tanti aestimaretis. Res enim concurrent contrariae. Quid adiuvas? Eadem nunc mea adversum te oratio est. Aliter homines, aliter philosophos loqui putas oportere?</p>
  </div>
  <div id="content">
    <p>Sed virtutem ipsam inchoavit, nihil amplius. Cur iustitia laudatur? Quis Aristidem non mortuum diligit? Quid censes in Latino fore?</p>
    <p>Id Sextilius factum negabat. Beatus sibi videtur esse moriens. Sumenda potius quam expetenda. Nunc omni virtuti vitium contrario nomine opponitur. Reguli reiciendam; At certe gravius. Contemnit enim disserendi elegantiam, confuse loquitur. Ego vero isti, inquam, permitto. Contemnit enim disserendi elegantiam, confuse loquitur.</p>
    <p>Beatus sibi videtur esse moriens. Facete M. Id enim natura desiderat.</p>
  </div>
  <div id="footer">
    <p>Polycratem Samium felicem appellabant. Faceres tu quidem, Torquate, haec omnia; Efficiens dici potest. Venit ad extremum; Quid, de quo nulla dissensio est?</p>
    <p>Praeclare hoc quidem. Sed haec omittamus; Sed videbimus.</p>
  </div>
</div>

Solution courtesy of: Salman A

Discussion

Well. i am not sure if it is possible without changing the div position,

so i have come with a proposition, if it is possible for you to use jquery and enquire.js to simulate media queries then it is very easy.

see this demo..

http://codepen.io/anon/pen/xrBAj

or

CODEPEN

just you need to add this script

    enquire.register("screen and (max-width:768px)", {
    match : function() { 
            $('#sidebar').insertAfter('#content');
    },
    unmatch : function() {
            $('#sidebar').insertBefore('#content');
    }
}).listen();
Discussion courtesy of: Sizzling Code

This recipe can be found in it's original form on Stack Over Flow.