How to make section responsive using flexbox? no framework - html

Question

I have a section which have 2 rows and each row contain two column , here is what I would like to have in :
Desktop :
On small devices
Here is html:
<section class="portfolio-section">
<div class="portfolio_top">
<div class="portfolio-video">
<img src="https://thumb.ibb.co/hctjZK/left_image.png">
</div>
<div class="portfolio-right">
<h2>Nature from air</h2>
<p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex. Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. .</p>
<button class="ask-price" type="button">Ask for price</button>
</div>
</div>
<div class="portfolio_bottom">
<div class="portfolio-left">
<h2>Nature from air</h2>
<p>Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan.</p>
<button class="ask-price" type="button">Ask for price</button>
</div>
<div class="portfolio-video">
<img src="https://thumb.ibb.co/eW6Soe/right_side.png">
</div>
</div>
</section>
Here is my css i have tried
img{
width: 100%;
}
.portfolio-section{
display: flex;
background-color: #f6f6f6;
.portfolio-left{
padding: 190px 70px;
font-size: 18px;
font-family: "ProximaNova";
color: rgb(94, 99, 114);
h2{
font-size: 48px;
font-family: "ProximaNova";
color: rgb(202, 0, 52);
font-weight: bold;
}
p {
font-size: 18px;
font-family: "ProximaNova";
color: rgb(94, 99, 114);
line-height: 2;
text-align: left;
width: 60%;
}
}
.portfolio-right{
padding: 190px 70px;
font-size: 18px;
font-family: "ProximaNova";
color: #5e6372;
/* margin: 0px 230px; */
margin-left: 272px;
h2{
font-size: 48px;
font-family: "ProximaNova";
color: rgb(202, 0, 52);
font-weight: bold;
}
p {
font-size: 18px;
font-family: "ProximaNova";
color: rgb(94, 99, 114);
line-height: 2;
text-align: left;
}
}
}
.ask-price{
width: 205px;
height: 50px;
border-radius: 300px;
border: none;
background-color: blue;
margin-top: 81px;
color: white;
}
#media (max-width: 768px){
.portfolio-section {
display: flex;
background-color: #f6f6f6;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
Here is Jsfidle: http://jsfiddle.net/ew83jpkf/1/
Unfortunatelly my solution looks ugly when I try responsiveness, I am strugling to make this section responsive.
Please can some one help? what do I need to change in my code to make it responsive?? any help will be apreciated
Thanks all

Answer 1

Keep it simple. On larger viewports use flex-direction to reverse the content blocks you want.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
}
.portfolio-video img {
display: inline-block;
object-fit: cover;
height: 100%;
width: 100%;
}
.portfolio-section {
background-color: #f6f6f6;
}
.text-block {
padding: 190px 70px;
font-size: 18px;
color: rgb(94, 99, 114);
}
.text-block h2 {
font-size: 48px;
font-family: "ProximaNova";
color: rgb(202, 0, 52);
font-weight: bold;
}
.text-block p {
font-size: 18px;
font-family: "ProximaNova";
color: rgb(94, 99, 114);
line-height: 2;
width: 60%;
}
.ask-price {
width: 205px;
height: 50px;
border-radius: 300px;
border: none;
background-color: blue;
margin-top: 81px;
color: white;
}
#media (min-width: 767px) {
.portfolio-section .portfolio-block {
display: flex;
}
.portfolio-block>div {
min-width: 50%;
}
.block-reverse {
flex-direction: row-reverse;
}
}
<section class="portfolio-section">
<div class="portfolio-block">
<div class="portfolio-video">
<img src="https://thumb.ibb.co/hctjZK/left_image.png">
</div>
<div class="text-block">
<h2>Nature from air</h2>
<p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex. Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. .</p>
<button class="ask-price" type="button">Ask for price</button>
</div>
</div>
<div class="portfolio-block block-reverse">
<div class="portfolio-video">
<img src="https://thumb.ibb.co/eW6Soe/right_side.png">
</div>
<div class="text-block">
<h2>Nature from air</h2>
<p>Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan.</p>
<button class="ask-price" type="button">Ask for price</button>
</div>
</div>
</section>