Align items on the left side without leaving space, and on the right side with auto space

mmdev 0
Viewed 25

I have 3 items to display on large screens like that:

_____________
|  1 |   3  |
|____|      |
|  2 |______|
|____|

Item 1 and 2 need to be just beneath one another, and the 3 on the right side without leaving any space.

On small screens it should look like:

______
|  1 |
|____|
|  3 |
|____|
|  2 |
|____|

Code:

<div class="container">
    <div class="row">
        <div class="col-lg-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat suscipit, voluptate exercitationem, soluta officia nesciunt dolorem illum enim vel ut natus, magni debitis doloribus nulla autem aspernatur nihil commodi voluptas.</div>
        <div class="col-lg-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.</div>
        <div class="col-lg-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium amet nisi vitae, accusantium commodi debitis quae exercitationem odio rem ut dolores quibusdam nostrum recusandae, quis, minima ad dignissimos mollitia.</div>
    </div>
</div>

Demo:

https://jsfiddle.net/pf0j1ehz/

Can it be done with flex property?

flexbox twitter-bootstrap css
1 Answers

What I would do would be to wrap your first 2 divs into a container, and then wrap your 3rd group into another container, then set the widths of each container to 50% and it should keep them how you have in your desired example. Also set .row to display:flex;

See what I did here:

#leftgroup {
  width: 50%;
}

#rightgroup {
  width: 50%;
}

.row{
display: flex;
}
<div class="container">
    <div class="row">
    
    <div id="leftgroup">
    <div class="col-lg-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat suscipit, voluptate exercitationem, soluta officia nesciunt dolorem illum enim vel ut natus, magni debitis doloribus nulla autem aspernatur nihil commodi voluptas.</div>
    <div class="col-lg-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.
    </div>
    </div>
    
     <div id="rightgroup">
    <div class="col-lg-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium amet nisi vitae, accusantium commodi debitis quae exercitationem odio rem ut dolores quibusdam nostrum recusandae, quis, minima ad dignissimos mollitia.</div>
    </div>
  </div>
</div>

EDIT, since the OP changed his question here is the revised answer. You are able to do this using a grid along with grid-template-areas and changing the grid-template-areas using a media query for smaller screens.

See here:

.row {
   display: grid;
   grid-template-areas:
    'item1 item3'
    'item2 item3';
}

#item1 {
  grid-area: item1;
}

#item2 {
  grid-area: item2;
}

#item3 {
  grid-area: item3;
}

@media screen and (max-width: 480px) {
.row {
   display: grid;
   grid-template-areas:
    'item1'
    'item3'
    'item2';
}
}
<div class="container">
    <div class="row">

    <div id="item1" class="col-lg-6">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat suscipit, voluptate exercitationem, soluta officia nesciunt dolorem illum enim vel ut natus, magni debitis doloribus nulla autem aspernatur nihil commodi voluptas.</div>
    <div id="item2" class="col-lg-6">2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.
    </div>
    <div id="item3" class="col-lg-6">3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium amet nisi vitae, accusantium commodi debitis quae exercitationem odio rem ut dolores quibusdam nostrum recusandae, quis, minima ad dignissimos mollitia.</div>
   
  </div>
</div>

userdxCK0
Related