CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-designtwitter-bootstrap-3
Ben Jacobs
Ben Jacobs

Reputation: 2526

Possible to achieve this Mobile/Desktop layout using Bootstrap? (or other grid)

I'm using Twitter Bootstrap 3 to create a mobile-ready website. On a large screen, I'd like two items (#1 and #2 in my sketch) to be in a sidebar to the left, while the large content area (#3) is to the right. On a small screen (mobile), I'd like them to be stacked in order #1, #3, #2.

Doing the following results in the third sketch:

<div class="row">
    <div class="col-lg-5">#1</div>
    <div class="col-lg-7">#3</div>
    <div class="col-lg-5">#2</div>
</div>

As you can see, my #2 div is pushed down to a new row. I've tried Pushing/pulling columns with no luck.

I can achieve a "dirty" version of I want by duplicating #2 and conditionally hiding/showing it with CSS, but this seems like an ugly hack.

Can my sketch be achieved using Bootstrap (or another CSS grid system)?

Sketch of desired layout

Upvotes: 3

Views: 2951

Answers (2)

Bass Jobsen
Bass Jobsen

Reputation: 49054

Try to float to the right: (see: http://bootply.com/78158)

CSS:

.floatright{float:right;}
@media (max-width: 768px)
{    
    .floatright{float:none;}
}

HTML:

<div class="container"> 
<div class="col-sm-5" style="height:50px;background-color:green;">1</div>
<div class="col-sm-7 floatright" style="height:100px;background-color:red;">3</div>
<div class="col-sm-5" style="height:50px;background-color:green;">2</div>
</div>

Upvotes: 8

Paul Sturm
Paul Sturm

Reputation: 2138

Would you settle for (on mobile) 3,1,2?

http://jsfiddle.net/chevybowtie/n9Ett/3/

<div class="container">
<div class="row">
    <div class="col-md-8 col-md-push-4 r">
        <p>#3 </p>
        <p></p>
    </div>
    <div class="col-md-4 col-md-pull-8">
        <div class="col-md-12 r"><p>#1 </p></div>
        <div class="col-md-12 r"><p>#2 </p></div>
    </div>
</div>
</div>

Upvotes: -1

Related Questions