Как сделать так, чтобы элементы div выглядели в мобильном портрете так же, как в мобильном пейзаже

Question

У меня два подвижных элемента, плавающих рядом в мобильном пейзаже, но как только я поворачиваю их в портретный режим, они возвращаются к одному элементу друг над другом. Страница: https://adsler.co.uk/browse-adsler/

Как разместить их рядом в мобильном портрете?

 .awpcp-listings {
 display: flex;
 flex-wrap: wrap;
 }

 .awpcp-listing-excerpt 
 {
 min-width: 20%;
 margin-right: 15px;
 box-shadow: 0 8px 16px #888888 !important;
 border-style: solid;
 color: grey;
 border-radius: 4px;
 margin-bottom: 10px;
 flex-grow: 2;
 }

 .awpcp-listing-excerpt-inner {
 min-width: 140px;
 min-height: 200px;
 }
.awpcp-listing-excerpt-content {
display: none;
}

 .awpcp-listing-title {
 font-size: 10px;
 padding: 5px;
 text-align: left;
 background-color: yellow;
 }
.awpcp-listing-excerpt-extra {
margin-left: 20px;
}

Перепробовал все вышеперечисленные div с @media screen and

@media screen and (orientation: portrait) {.awpcp-listing- 
 excerpt-extra {
 margin-left: 20px;
 }} 

Ничего.

Мой HTML:

<div class="awpcp-listing-excerpt $awpcpdisplayaditems 
$isfeaturedclass" data-breakpoints-class-prefix="awpcp- 
listing-excerpt" data-breakpoints='{"tiny": [0,328], "small": 
[328,600], "medium": [600,999999]}'>
<div class="awpcp-listing-excerpt-thumbnail">
$awpcp_image_name_srccode
</div>
<div class="awpcp-listing-excerpt-inner" style="w">
<h4 class="awpcp-listing-title">$title_link</h4>
<div class="awpcp-listing-excerpt- 
content">$excerpt</div>
</div>
<div class="awpcp-listing-excerpt-extra">
$awpcpadpostdate
$awpcp_city_display
$awpcp_state_display
$awpcp_display_adviews
$awpcp_display_price
$awpcpextrafields
</div>