0

I got an simple CSS grid that I developed myself, it reminds of Twitter bootstrap. I got an row element and several col elements with their own span size classes.

Below is a simple clean example of my code:

.row{
  margin-left: -15px;
  margin-right: -15px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

.row:after,
.row:before{
  content: " ";
  display: table;
}

.row:after{
  clear: both;
}

.col{
  display: inline;
  float: left;
  padding: 0 15px;
  position: relative;
  min-height: 1px;
}

.span-6{
  width: 50%;
}

@media screen and (max-width:780px){
  .span-md-12{
    width: 100%;
  }
}
<div class="row">
  <div class="col span-6 span-md-12">World</div>
  <div class="col span-6 span-md-12">Hello</div>
</div>

I want the Hello to appear before the World statement in my example. It needs to work when the width is 100% on both columns, so float right on the col element won't cut it.

In other words I want to have an CSS class that I can add so columns that appear after in the HTML can flow before the first column. Any idea how I can achieve this?

Edit: My solution was to add flexbox support in the media query. It seems to have good support for mobiles. See: http://caniuse.com/#feat=flexbox

MrZiggyStardust
  • 713
  • 6
  • 19
  • I'm trying to do the same thing, except my layout is actually based on Bootstrap. I've asked the question here: http://stackoverflow.com/questions/30300499/change-column-order-in-mobile-view Will watch this question for a solution! – Dave May 19 '15 at 08:18
  • I think changing the markup is the only way to go with Bootstrap, instead of using floats of course. – odedta May 19 '15 at 08:23
  • Does not really make any difference if I float right instead of float left when both columns are width: 100%; - Did I miss any thing? – MrZiggyStardust May 19 '15 at 08:23
  • icethrill: `.span-6{ width: 50%; }` – odedta May 19 '15 at 08:24
  • Yes it works if the columns are width: 50%; But if you noticed my code example I have an special class that makes it width: 100%; I want them to flow vertically in the row. Sorry if I left out that fact in the description. – MrZiggyStardust May 19 '15 at 08:28
  • I guess the answer is reset floats, display and add a flexbox solution to this. Thanks for your comment! It helped me. – MrZiggyStardust May 19 '15 at 09:32

0 Answers0