How to place elements like this

Question

I tried to set to parent block this:

display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 500px;

and it works, but it will break if, as example, the second block will be larger. So I am looking for another decision. (I cannot use css-grid)

Codepen Link

Image how it might looks

You might consider to use Boostrap and the related "push" and "pull" classes — Matt, Jul 30 '18 at 11:28
I have just added code, sorry guys, it is my first question here — Anzhelika, Jul 30 '18 at 11:33
https://stackoverflow.com/questions/33947885/left-column-and-stacked-right-column-using-flexbox-css — Paulie_D, Jul 30 '18 at 14:12

Girisha C · Answer 1 · 2018-08-01T12:06:10.730

0

Please have a look at the below working example below, hope it helps :)

body .child {
  font-family: sans-serif;
}


.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 90%;
  margin: 0 auto;
}

.child {
  margin: 10px;
  padding: 50px 20px;
  min-width: 39%;
  box-shadow: inset 0 0 0 2px #000;
}

.parent {
  max-height: none;
}

.child--1 {
  order: 1;
}

.child--2 {
  order: 3;
}

.child--3 {
  order: 2;
  padding: 100px 20px;
}

@media screen and (max-width: 500px) {
  .parent {
    flex-direction: column;
  }
  .child {
    min-width: auto;
  }
}

<div class="parent">
  <div class="child child--1">Child 1</div>
  <div class="child child--2">Child 2</div>
  <div class="child child--3">Child 3</div>
</div>

edited Aug 01 '18 at 12:06

answered Jul 30 '18 at 11:50

Girisha C

1,922
1
12
20

Thank you for answer, but it is exactly what I need on small devices. ( https://i.stack.imgur.com/Az4Uw.png ) – Anzhelika Jul 30 '18 at 11:56
@Anzhelika, please have a look at the above updated snippet :) – Girisha C Jul 30 '18 at 12:36

score 0 · Answer 2 · answered Jul 30 '18 at 13:01

Try this

.bigger {
   height: 300px !important;
  }
  
  .smaller {
   height: 99px !important;
   margin-bottom: 2px;
  }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">



<div class="container-fluid">
  <div class="row main">
  
    <div class="col-sm-6">
      <div class="col-sm-12"><p>
       1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error nihil consequuntur               itaque placeat est voluptates, temporibus iste nesciunt dignissimos excepturi.
      </p> </div>
      <div class="col-sm-12"> 
      <p>
      2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint optio laudantium dolorem         doloremque non praesentium sit. Corporis quisquam soluta, ullam unde deleniti at expedita         facilis animi dicta facere quam iste!
      </p>
      </div>
    
    </div>
     <div class="col-sm-6"> 
     <p>
     3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam voluptas maxime eos labore, sed, temporibus tenetur a sunt ratione voluptates excepturi est eaque? Porro, nostrum impedit laborum minima quos at nulla sit officiis. Dignissimos, at. Ipsam delectus dicta ipsum cupiditate. Ullam voluptas maxime eos labore, sed, temporibus tenetur a sunt ratione voluptates excepturi est eaque? Porro, nostrum impedit laborum minima quos at nulla sit officiis. Dignissimos, at. Ipsam delectus dicta ipsum cupiditate.
     </p>
     </div>
  </div>
</div>

How to place elements like this

2 Answers2