CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Webdrips
Webdrips

Reputation: 265

Bootstrap 3 Div Ordering Desktop vs Mobile

Hopefully this image explains exactly what I'm trying to accomplish: Twitter Bootstrap 3 desktop vs mobile div ordering

Since the blue block represents a simple list, I think it may be easier to just output the block twice, and apply a "desktop-only" and "mobile-only" class, then use that class to dictate visibility, but I was curious to know if the above is possible with pure HTML/CSS out of box for Bootstrap 3?

Upvotes: 1

Views: 377

Answers (2)

Thomas
Thomas

Reputation: 2367

This should work:

<div class="row">
    <div class="col-md-4">First</div>
    <div class="col-md-8" id="big">Big</div>
    <div class="col-md-4">Second</div>
</div>

And CSS:

@media (min-width: 769px) {
    #big {
        float: right;
    }
}

Here is an example: http://jsfiddle.net/8r4g20cr/1/

Upvotes: 2

Wilf
Wilf

Reputation: 2315

I'm not sure if it possible but from your layout you need something like:

<div class="row">
  <div class="col-md-4">
    <div class="marron"></div>
    <div class="blue"></div>
  </div>
<div class="col-md-8">
  <div class="green"></div>
</div>
</div>

When you the screen resized, the div in rows will be stacked up orderly. I don't think I can reorder it for mobile devices. Stay tune for other opinions.

Upvotes: 0

Related Questions