CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
chrislhardin
chrislhardin

Reputation: 1745

Bootstrap 3 second column collapse.. third column float right

In the code below for Bootstrap 3, I am attempting to get the 3rd column to not stack. I want it to always stay top right just as the left most column stays top left. Is there a simple way? I thought about just excluding that section from bootstrap and just apply css to float right, but surely in Bootstrap, I can do this. 

<header id="t3-header" class="container t3-header">
<div class="row">

    <!-- LOGO -->
  <div class="col-xs-12 col-md-2 logo"> I stay always top left</div> 

 <div class="col-xs-12 col-md-8">  I should stackunder 1st column as browser resizes </div>   

       <!-- I want this column to not stack below column 2 as the browser resizes. -->
       <div class="col-xs-12 col-md-2"> 
        I should always stay top right
            <div class="row">
                <div class="col-lg-6"> </div>
                 <div class="col-lg-6"> </div>
            </div>
        </div>
 </div>

Upvotes: 1

Views: 1230

Answers (1)

MackieeE
MackieeE

Reputation: 11872

If I've understood you correctly, you've got to make the "top right" div, appear first in the cascade. To do this, first it as the first column, then you can use pull-left and pull-right helper classes to trick the first two columns:

Secondly, you could remove the col-xs-12 alike in the example:

<header id="t3-header" class="container t3-header">
    <div class="row">

        <div class="col-md-2 pull-right">
            I should always stay top right
            <div class="row">
                <div class="col-lg-6"></div>
                <div class="col-lg-6"></div>
            </div>
        </div>

        <!-- LOGO -->
        <div class="col-sm-12 col-md-2 logo pull-left">
             I stay always top left
        </div>

        <div class="col-sm-12 col-md-8 pull-left">
             I should stackunder 1st column as browser resizes
        </div>

    </div>
</div>

Example: http://www.bootply.com/ee3E67pujY

Upvotes: 1

Related Questions