Is there any option to make the fourth block follow immediately after the first one without the “indent” at the top, which is obtained from the height of the first line?

There is an option to divide the container into 2 divas of 50% each and throw blocks into each, then they will be under each other. But is there an option without it in nature?

enter image description here

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div style="background-color:#ff0;" class="container-fluid"> <div class="row"> <div style="background-color:#f00; height:20px;" class="col-1 col-sm-6">1</div> <div style="background-color:#0f0; height:30px;" class="col-1 col-sm-6">3</div> <div style="background-color:#00f; height:40px;" class="col-1 col-sm-6">4</div> <div style="background-color:#0ff; height:55px;" class="col-1 col-sm-6">2</div> </div> </div>

    2 answers 2

    Hello! Here is the solution to your question via flexbox:

     <html> <head> <link rel="stylesheet" href="bootstrap-grid.min.css"> </head> <body> <div style="background-color:#ff0; height:100px;" class="container-fluid"> <div class="row"> <div style="display:flex; flex-direction: row; justify-content: space-around;" class="col-1 col-sm-12"> <div style="width:100%; display:flex; flex-direction: column"> <div style="background-color:#f00; height:20px;">1</div> <div style="background-color:#00f; height:40px;">4</div> </div> <div style="width:100%; display:flex; flex-direction: column"> <div style="background-color:#0f0; height:30px;">3</div> <div style="background-color:#0ff; height:55px;">2</div> </div> </div> </div> </div> </body>

    You create a flex-container with a horizontal direction, there are two more flex-containers with a vertical direction and insert the blocks you need into these containers.

      Add a block with the number 3 (which is the second one), a class with the float: right; property float: right; on screens as wide as 768px .

       @media (min-width: 768px) { .pull-sm-right { float: right !important; } } 
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div style="background-color:#ff0;" class="container-fluid"> <div class="row"> <div style="background-color:#f00; height:20px;" class="col-1 col-sm-6">1</div> <div style="background-color:#0f0; height:30px;" class="col-1 col-sm-6 pull-sm-right">3</div> <div style="background-color:#00f; height:40px;" class="col-1 col-sm-6">4</div> <div style="background-color:#0ff; height:55px;" class="col-1 col-sm-6">2</div> </div> </div>