Items are not horizontally aligned [duplicate] - html

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
The 4 divs have a width of 23% and are displayed inline-block, they have a height of 220px and margin 0. The issue is that they are not horizontally aligned
I tried to change the height and width already and removed the margin but that does not fix it.
It looks like this...
.aside-column {
width: 23%;
display: inline-block;
height: 220px;
margin: 0;
}
<div class="aside-column aside-column1">
<h4>Lufthansa vs Airbus</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column2">
<h4>Bill Gates History</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column3">
<h4>Tescos Stabbing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column4">
<h4>Amazon Forest Fire</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>


Give vertical-align:top; to .aside-column class.
.aside-column {
width: 23%;
display: inline-block;
height: 220px;
margin: 0;
vertical-align:top;
}
<div class="aside-column aside-column1">
<h4>Lufthansa vs Airbus</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column2">
<h4>Bill Gates History</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column3">
<h4>Tescos Stabbing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column4">
<h4>Amazon Forest Fire</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>


You can also use a parent container which is a flexbox.
.container {
display: flex;
}
.aside-column {
width: 23%;
height: 220px;
margin: 1%;
}
<div class="container">
<div class="aside-column aside-column1">
<h4>Lufthansa vs Airbus</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column2">
<h4>Bill Gates History</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column3">
<h4>Tescos Stabbing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column4">
<h4>Amazon Forest Fire</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
</div>

Related

How can I move these elements up? in CSS [duplicate]

This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 8 months ago.
I want to move element to up like in photo in attachment. which code I should write to my css ?
here is photo of my code
*{box-sizing: border-box;}
body{
height: 100vh;
width: 100vw;
font-family: sans-serif;
}
h2{padding: 5px;}
p{padding: 5px;}
.container{
display: flex;
width: 1200px;
margin: 50px auto;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-around;
background-color: aquamarine;
}
.container__item{
width: 350px;
/* height: 100%; */
background-color: #fff;
}
[class*="image"]{
width: 350px;
background-color: rgb(200, 200, 200);
color: gray;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
[class$="150"]{height: 150px;}
[class$="100"]{height: 100px;}
[class$="350"]{height: 350px;}
[class$="220"]{height: 220px;}
[class$="230"]{height: 230px;}
<div class="container">
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x220">350x220</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x230">350x230</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x350">350x350</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
</div>
I already tried justify-content: flex-start; and align-items: flex-start; but they didn't help for this example. Maybe I have another problem ? I can't solve it. I try to solve it about two days :D I can't find answer for this. Please somebody help to solve this exercise.

Check this. You can use display:grid to check it out.
*{box-sizing: border-box;}
body{
height: 100vh;
width: 100vw;
font-family: sans-serif;
}
h2{padding: 5px;}
p{padding: 5px;}
.container{
width: 1200px;
margin: 50px auto;
column-count: 4;
column-gap: 5px;
}
.container__item{
margin: 0;
display: grid;
grid-template-rows: 1fr auto;
margin-bottom: 0px;
break-inside: avoid;
}
[class*="image"]{
width: 100%;
background-color: rgb(200, 200, 200);
color: gray;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
[class$="150"]{height: 150px;}
[class$="100"]{height: 100px;}
[class$="350"]{height: 350px;}
[class$="220"]{height: 220px;}
[class$="230"]{height: 230px;}
<div class="container">
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x220">350x220</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x230">350x230</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x350">350x350</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
</div>

Is there any way to use flex wrap to wrap on only one column?

Let's say I have 3 divs...
HTML:
<section class="features">
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
</section>
CSS:
.section {
display: flex;
flex-wrap: wrap;
}
So what I want is to make these items wrap on only one column when I reduce my screen size...
The current behavior is like this on medium screen size
I want the behavior to be like this in all other screen sizes

<section class="features">
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
quaerat molestiae sed quis labore.
</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
quaerat molestiae sed quis labore.
</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
quaerat molestiae sed quis labore.
</p>
</div>
</section>
CSS - I have used flexbox
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.features {
display: flex;
flex-wrap: wrap;
}
.features .item {
/*flex: 0 0 100%;*/ /*remove if you don't want media query*/
max-width: 384px;/*add if you don't want media query*/
width: 100%;/*add if you don't want media query*/
padding: 0 1rem;
margin-bottom: 1rem;
}
/*remove if you don't want media query*/
/*#media (min-width: 768px) {
.features .item {
flex: 0 0 33.33%;
}
}*/

You can call that on media query Are you trying to do something like this??Let me know
section.features {
display: flex;
justify-content:space-around;
padding:10px;
}
#media only screen and (max-width:768px){
section.features {display: grid;}
}
RESIZE ME
<section class="features">
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
</section>

Css display property not working perfectly in my practice website

I don't understand why 2nd div is not up of 1st div. I want they 2 div perfectly set as like my image direction. already i try display block but not working. i don't know why main problem. already i have many research, but all fail. so please help me to solution my problem. advanced thanks and love from my top heart.
`
.testimonial .content{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.testimonial .content .testimonialBx{
max-width: calc(50% - 40px);
padding: 60px 40px;
margin: 20px;
background: #2196f3;
}
<section class="testimonial">
<div class="heading">
<h2>Testimonial</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure!</p>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
</section>
`

Wrap those 2 divs in 1 div and make it as flex.
Updated Code
.testimonial .content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.testimonial .content .testimonialBx {
max-width: calc(50% - 40px);
padding: 60px 40px;
margin: 20px;
background: #2196f3;
}
.container {
display: flex;
}
<!DOCTYPE html>
<html>
<head> </head>
<body>
<section class="testimonial">
<div class="heading">
<h2>Testimonial</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure!</p>
</div>
<div class="container">
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
</div>
</section>
</body>
</html>

Answer from #nagendraNag is ideal. I would just remove the max-width
max-width: calc(50% - 40px);

Same height for row in box

I have free box and content in it, but I need to do same height for row in it. Now is same height only box, but I need to do same height for row in box. In example which is bellow I have blue row, which is row where I need to do same height for it and keep them on the same line with the same height.
.container {
display:flex;
}
.box {
background:red;
}
.row {
background:blue;
}
<div class="container">
<div class="box">
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore explicabo quam aut cum pariatur blanditiis possimus</p></div>
<div class="row"><p>Lorem ipsum dolor sit amet</p></div>
</div>
<div class="box">
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore explicabo quam aut cum pariatur blanditiis possimus</p></div>
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque dolorem ut fuga impedit, obcaecati aut est inventore voluptatibus eligendi iusto dignissimos consequatur pariatur tenetur vero. Eum aspernatur ad porro a.</p></div>
</div>
<div class="box">
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt inventore, facilis error, tempore nisi optio quasi</div>
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p></div>
</div>
</div>

Have a read of this http://www.lottejackson.com/learning/an-equal-height-grid-using-flexbox
You need to make the rows display:flex

Bootstrap 4.0 order columns

I am trying to build the following layout with bootstrap 4, I would like 2 bigger columns on the left and then 4 grouped together on the right but their height togetehr cannot exceed the heigth of the first 2.
Except I just cant get it to work.
This is what I want:
This is basically what I got:
https://codepen.io/anon/pen/ZrBpze
<section id="mu-featured">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<img src="img/picture.jpg" alt="" style="height: 235px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur.</p>
Call to action!
</div>
<div class="col-md-4 col-sm-6">
<img src="img/picture.jpg" alt="" style="height: 235px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur.</p>
Call to action!
</div>
<div class="col-md-4 col-sm-6">
<img src="img/picture.jpg" alt="" style="height: 85px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur. Call to action!</p>
</div>
<div class="col-md-4 col-sm-6">
<img src="img/picture.jpg" alt="" style="height: 85px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur. Call to action!</p>
</div>
<div class="col-md-4 col-sm-6">
<img src="img/picture.jpg" alt="" style="height: 85px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur. Call to action!</p>
</div>
<div class="col-md-4 col-sm-6">
<img src="img/picture.jpg" alt="" style="height: 85px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur. Call to action!</p>
</div>
</div>
</div>
</section>

You didn't specify how they should behave on smaller screens, but to answer your question: You need to nest the right-most items like shown in the code below.
In other words, what you are looking to do is called "nesting". Not ordering.
To nest, you put a .row into a column and then put at least one other col-* inside that nested row (the second code snippet further down below produces a slightly different result):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<section id="mu-featured">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<img src="https://placehold.it/235" alt="" style="height: 235px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur.
</p>
Call to action!
</div>
<div class="col-md-4 col-sm-6">
<img src="https://placehold.it/235" alt="" style="height: 235px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur.
</p>
Call to action!
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-12">
<img src="https://placehold.it/85" alt="" style="height: 85px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero. Call to action!</p>
</div>
<div class="col-12">
<img src="https://placehold.it/85" alt="" style="height: 85px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero. Call to action!</p>
</div>
<div class="col-12">
<img src="https://placehold.it/85" alt="" style="height: 85px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero. Call to action!</p>
</div>
</div>
</div>
</div>
</div>
</section>
And here's another version that produces a slightly different result (click the "run code snippet" button below and expand to full page):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section id="mu-featured">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<img src="https://placehold.it/235" alt="" style="height: 235px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.
</p>
Call to action!
</div>
<div class="col-md-4 col-sm-6">
<img src="https://placehold.it/235" alt="" style="height: 235px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.
</p>
Call to action!
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-auto">
<img src="https://placehold.it/85" alt="" style="height: 85px">
</div>
<div class="col">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Call to action!</p>
</div>
<div class="w-100"></div>
<div class="col-auto">
<img src="https://placehold.it/85" alt="" style="height: 85px">
</div>
<div class="col">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Call to action!</p>
</div>
<div class="w-100"></div>
<div class="col-auto">
<img src="https://placehold.it/85" alt="" style="height: 85px">
</div>
<div class="col">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Call to action!</p>
</div>
<div class="w-100"></div>
<div class="col-auto">
<img src="https://placehold.it/85" alt="" style="height: 85px">
</div>
<div class="col">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Call to action!</p>
</div>
</div>
</div>
</div>
</div>
</section>
In that second code snippet, the small images and their text content are separated in 2 different columns and <div class="w-100"></div> is used as a separator for small screens. w-100 means "width:100%".