How to force center grid-element to linebreak

Asked Oct 05 '19 at 11:37

Active Oct 06 '19 at 11:21

Viewed 57 times

I am using the Bootstrap grid system for styling. What I want to achieve is the following (the illustration on the top is meant to be for Desktop size, the one on the bottom for mobile view):

current state

The items are located in a div with the classes row and container.

<div class="container row">
 <div class="col-md-2 col-6">
    div1
 </div>
 <div class="col-md-9 col-12">
    div 2
 </div>
 <div class="col-md-1 col-6">
    div 3
 </div>
</div>

The css .container class:

.container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 100%;
}

Currently, I am getting something like this when resizing to mobile: current state

How can I achieve the layout shown in the first image?

edited Oct 06 '19 at 11:21

asked Oct 05 '19 at 11:37

Tobias Kaufmann

Send a link as an example. – Omar Makled Oct 05 '19 at 11:47
3

No, please don't post a link. Post a snippet of the code needed to reproduce the problem. – But those new buttons though.. Oct 05 '19 at 15:05
1

For a proper answer, you need to provide a [mcve], and it should be **within** the question, not as an external link (or both). – Asons Oct 06 '19 at 09:13
I added the html code and rewrote the problem specification, I hope it's clear now. – Tobias Kaufmann Oct 06 '19 at 11:13
Getting the second element below the first and third might not be possible. Maybe you should try some other library as Masonry. https://masonry.desandro.com/ – Abhay Jatin Doshi Oct 06 '19 at 11:20
Thanks ReSedano, that was exactly my problem, I could solve it with using the Bootstrap order classes. – Tobias Kaufmann Oct 07 '19 at 10:38

How to force center grid-element to linebreak

0 Answers0