Images displayed above the article on mobile devices when using css grid
My issues:
I am creating a webiste with articles and I have to make that site for responsive. I am using CSS GRID for my site. I have a problem on mobile devices.
I have two types of articles (picture on the left and picture on the right). But when viewed on mobile devices, these two pictures are not under the articles. The image from the first articles should be at the bottom.
#news_content { padding: 215px 15px 0px 15px; } #news_content>.row { grid-template-columns: repeat(12, 8.533333%); } #news_content>.row>.col-1 { grid-column: span 6; } #news_content>.row>.col-1>.col-1-padding { padding: 20px 0px 0px 30px; } #news_content>.row>.col-2 { grid-column: span 6; } #news_content>.row>.col-2>.col-2-padding { padding: 20px 0px 20px 30px; } @media (max-width: 720px) { #news_content>.row>.col-1, #news_content>.row>.col-2 { grid-column: span 12; } } @media (max-width: 720px) { #news_content { padding: 50px 45px 0px 15px; } }<div id="news_content" class="grid"> <div class="row"> <div class="col-1"> <div class="col-1-padding"> <img src="https://via.placeholder.com/300x200" id="Image_style"> </div> </div> <div class="col-2"> <div class="col-2-padding"> <h1>Lorem Lorem?</h1> <p class="news"> Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> </div> </div> </div> <div id="news_content" class="grid"> <div class="row"> <div class="col-1"> <div class="col-1-padding"> <h1>Lorem Lorem?</h1> <p class="news"> Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <p> Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> </div> <div class="col-2"> <div class="col-2-padding"> <img src="https://via.placeholder.com/300x200" id="Image_style"> </div> </div> </div> </div>
<div id="news_content" class="grid"> <div class="row"> <div class="col-1"> <div class="col-1-padding"> <img src="img/poco.jpg" id="Image_style"> </div> </div> <div class="col-2"> <div class="col-2-padding"> <h1>Lorem Lorem?</h1> <p class="news"> Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> </div> </div> </div> <div id="news_content" class="grid"> <div class="row"> <div class="col-1"> <div class="col-1-padding"> <h1>Lorem Lorem?</h1> <p class="news"> Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <p> Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> </div> <div class="col-2"> <div class="col-2-padding"> <img src="img/video.jpg" id="Image_style"> </div> </div> </div> </div> #news_content { padding: 215px 15px 0px 15px; } #news_content > .row { grid-template-columns: repeat(12, 8.533333%); } #news_content > .row > .col-1 { grid-column: span 6; } #news_content > .row > .col-1 > .col-1-padding { padding: 20px 0px 0px 30px; } #news_content > .row > .col-2 { grid-column: span 6; } #news_content > .row > .col-2 > .col-2-padding { padding: 20px 0px 20px 30px; } @media (max-width: 720px) { #news_content > .row > .col-1, #news_content > .row > .col-2 { grid-column: span 12; } } @media (max-width: 720px) { #news_content { padding: 50px 45px 0px 15px; } } 
