Изменение макета списка на мобильных устройствах только с использованием css

Question

У меня есть следующий код на сайте wordpress. Я не могу изменить html, поэтому, используя только запросы css @media, я хотел бы, чтобы список переместился с 4 на строку на рабочий стол, до 2 на строку в окне просмотра под 767px.

Возможно ли это?

.recent_view_prod ul.product_list_widget li { 
 
    width: 22%; 
 
    margin-right: 2%; 
 
} 
 
.recent_view_prod ul.product_list_widget li img { 
 
    width: 100%; 
 
    float: left; 
 
} 
 
.recent_view_prod ul.product_list_widget li { 
 
    display: inline-block; 
 
} 
 
.recent_view_prod span.product-title { 
 
    display: none; 
 
} 
 

 
a:hover > .attachment-shop_thumbnail + span { 
 
    display: block; 
 
    position:absolute; 
 
}

<div class="wpb_widgetised_column wpb_content_element recent_view_prod"> 
 
    <div class="wpb_wrapper"> 
 
    <div id="woocommerce_recently_viewed_products-3" class="widget woocommerce widget_recently_viewed_products"> 
 
     <h3 class="widget-title element-title">Recently Viewed Products</h3> 
 
     <ul class="product_list_widget"> 
 
     <li> 
 
      <a href="http://uc.petekirkwood.co.uk/shop/opulent-bloom-card-holder/" title="Opulent Bloom Card Holder"> 
 
      <img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/TedBaker_CardHolderOpulentBloom_2-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="TedBaker_CardHolderOpulentBloom_2"> \t <span class="product-title">Opulent Bloom Card Holder</span> 
 
      </a> 
 
      
 
     </li> 
 
     <li> 
 
      <a href="http://uc.petekirkwood.co.uk/shop/store-ms/" title="Store-M's Nesting Food Boxes"> 
 
      <img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/StoreMs1-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="StoreMs1"> \t <span class="product-title">Store-M's Nesting Food Boxes</span> 
 
      </a> 
 
      
 
     </li> 
 
     <li> 
 
      <a href="http://uc.petekirkwood.co.uk/shop/happy-jackson-crackers-tin/" title="Happy Jackson Crackers Tin"> 
 
      <img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/HappyJCrackersTIn-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="HappyJCrackersTIn"> \t <span class="product-title">Happy Jackson Crackers Tin</span> 
 
      </a> 
 
      
 
     </li> 
 
     <li> 
 
      <a href="http://uc.petekirkwood.co.uk/shop/happy-jackson-snack-box-set/" title="Happy Jackson Snack Box Set"> 
 
      <img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/SnackBoxSetx4_2-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="SnackBoxSetx4_2"> \t <span class="product-title">Happy Jackson Snack Box Set</span> 
 
      </a> 
 
      
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Попробуйте использовать float: left в соответствии с 767px и увеличить ширину <li>.

Например попробуйте этот код:

.recent_view_prod ul.product_list_widget li { 
    float: left; 
    margin-right: 2%; 
    width: 40%; 
} 

Answer 2

Это вполне возможно сделать это. Вы можете иметь свой код по умолчанию, что-то вроде этого (мобильный первый подход) - вам, возможно, придется играть с процентом, чтобы убедиться, два подходят бок о бок:

.recent_view_prod ul.product_list_widget li { 
    display: block; 
    float: left; 
    width: 47%; 
    margin-right: 2%; 
} 
.recent_view_prod ul.product_list_widget li img { 
    width: 100%; 
    float: left; 
} 
.recent_view_prod ul.product_list_widget li { 
    display: inline-block; 
} 
.recent_view_prod span.product-title { 
    display: none; 
} 

a:hover > .attachment-shop_thumbnail + span { 
    display: block; 
    position:absolute; 
} 

, а затем добавить медиа-запрос на end (снова отрегулируйте минимальную ширину, чтобы удовлетворить вас), которая возвращает их к четырем столбцам, как у вас в настоящее время, так как экран расширяется.