CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Grunter
Grunter

Reputation: 73

Reorder columns Bootstrap

This is how its supposed to look but i just cant figure out how to make it happen:

large screen:

[picture][text][empty space][empty space]

tablet/phone:

[empty space][text][empty space]
[....................picture.....................]

             <div class="row">
                <div class="col-xs-4 col-sm-push-4"style="background-color:blue;">
                    <p>Text</p>
                </div>
                <div class="col-lg-2 col-lg-push-4 col-xs-pull-4"style="background-color:green; height:200px;"></div>
                  <div class="col-lg-2 col-lg-push-4 col-xs-pull-4"style="background-color:yellow; height:200px;"></div>
                        <div class="col-md-4 col-md-pull-8"style="background-color:red;">
                    <div class="picture"></div>
                </div>                  
            </div>

Upvotes: 1

Views: 162

Answers (1)

Turnip
Turnip

Reputation: 36642

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  
  <div class="col-xs-4 col-xs-push-4" style="background-color:blue;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehe</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitaborum</p>
  </div>
  
  <div class="col-lg-2 col-lg-push-4 col-xs-pull-4 col-xs-4" style="background-color:green; height:200px;">Empty</div>
  
  <div class="col-lg-2 col-lg-push-4 col-xs-4" style="background-color:yellow; height:200px;">Empty</div>
  
  <div class="col-lg-4 col-lg-pull-8 col-xs-12" style="background-color:red;">
    <div class="picture">Picture</div>
  </div>

</div>

Upvotes: 1

Related Questions