CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user1605822
user1605822

Reputation: 99

Switch Column Placement Bootstrap 4 Using CSS

See Sample Code: http://www.bootply.com/kp2Iv3uJ4j

Simply, I want to change left to right columns using only CSS. Is there any way to do this using only CSS without having to change the HTML?

For example, if there was a logo in the first column and text in the second column, can I make them switch places so to speak using only CSS?

Thank you very much for your time!

Warren

Upvotes: 0

Views: 227

Answers (3)

Davide Mancuso
Davide Mancuso

Reputation: 384

You can apply on HTML push-md-6 (left to right) and pull-md-6 (right to left) Bootstrap classes.

On your example:

col-md-6 first push-md-6
col-md-6 second pull-md-6

or, using only your classes .first and .second

.first { left: 50%; }
.second { right: 50%; }

Upvotes: 1

Arjan Knol
Arjan Knol

Reputation: 940

Give the row a row-reverse as follows: 

.row {
   flex-direction:row-reverse;
}

Here is the example:Bootply

Or if you do want to change some HTML this would be the better option:

<div class="row flex-row-reverse">
  <div class="col-md-6 first">
     <img src="http://placehold.it/350x150?text=first">
  </div>
  <div class="col-md-6 second">
      <img src="http://placehold.it/350x150?text=second">
  </div>
</div>

Here is an example Bootply

Upvotes: 1

LKG
LKG

Reputation: 4192

Try this:

<div class="row">
  <div class="col-md-6 push-md-6 first">
    <img src="http://placehold.it/350x150?text=first">
  </div>
  <div class="col-md-6 pull-md-6 second">
    <img src="http://placehold.it/350x150?text=second">
  </div>
</div>

Updated Link

Upvotes: 0

Related Questions