CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Haradzieniec
Haradzieniec

Reputation: 9340

How can I change the order of my Bootstrap columns?

Here is how the blocks are positioned on desktop within a row class which looks good on desktop. This is how the blocks are positioned on desktop which is good.

Unfortunately, on xs device this looks not the way we need. I need this order when it's displayed on extra-small device:

1
3
2

Solution that doesn't work: I can't place the block 3 into block 1, as I need full width of block 3 on desktop (the 100% of the screen width, not the 100% of the block 1).

Any ideas how to change the order of 2nd and 3rd blocks with pure css on xs-devices so it is as 

1
3
2

, and not

1
2
3

as it is now?

Thank you.

Upvotes: 0

Views: 470

Answers (4)

Tu Nguyen
Tu Nguyen

Reputation: 10179

Any ideas how to change the order of 2nd and 3rd blocks with pure CSS on xs-devices so it is as

Try this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <style>
        .box {
            height: 300px;
        }

        .box-1 {
            background-color: orange
        }

        .box-2 {
            background-color: blue;
        }

        .box-3 {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box box-1 col-sm-8 col-xs-12">

    </div>
    <div class="box box-2 col-sm-4 hidden-xs">

    </div>
    <div class="box box-3 col-xs-12">

    </div>
    <div class="box box-2 col-xs-12 hidden-sm hidden-md hidden-lg">

    </div>
</body>
</html>

You might consider this solution in case there's no solution out there can help achieve your required behaviour with pure CSS

Upvotes: 1

Mile Mijatović
Mile Mijatović

Reputation: 3177

You cannot change the order of columns in smaller screens but you can do that in large screens.

So change the order of your columns.

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

By default this displays the main content first.

So in mobile main content is displayed first.

By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.

Column Reordering in Bootstrap

Upvotes: 0

Overcomer
Overcomer

Reputation: 464

Assuming block 2 has a fixed height and its always at most the same height with block one, you can do the following:

CSS:

<style type="text/css">
    .wrap {
        position: relative;
    }

    .block1 {
        padding-right: 33.3333%
    }

    @media(min-width: 768px) {
        .block2 {
            position: absolute;
            top: 0;
            right: 0;
            width: 33.333%;
        }
    }
</style>

HTML:

<div class="wrap">
    <div class="block1">
        <div class="col-sm-12">Block1</div>
    </div>
    <div class="col-sm-12">Block 3</div>
    <div class="block2">
        <div class="col-sm-12">Block 2</div>
    </div>
</div>

Please note that with this method, if block 2 is longer than block one, it will overflow on block 3.

Upvotes: 0

Rule
Rule

Reputation: 325

It is important to also include Container and Row. https://getbootstrap.com/docs/4.0/layout/grid/

Does the original code look like this?

<div class="container">
  <div class="row">
    <div class="col-sm-8 col-xs-12">
      1
    </div>
    <div class="col-sm-4 col-xs-12">
      2
    </div>
  </div>
  <div class="row">
    <div class="col-sm">
      3
    </div>
  </div>
</div>

Upvotes: 0

Related Questions