Changing a list layout on mobile devices only using css - html

Question

I have the following code on a wordpress site. I can't change the html, so, only using css #media queries I would like to make the list go from 4 per row on a desktop, down to 2 per row in a viewport of under 767px.
Is that possible?
.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"> <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"> <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"> <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"> <span class="product-title">Happy Jackson Snack Box Set</span>
</a>
</li>
</ul>
</div>
</div>
</div>

Answer 1

Try using float: left in the under 767px and increase the width of <li>.
For example try this code:
.recent_view_prod ul.product_list_widget li {
float: left;
margin-right: 2%;
width: 40%;
}

Answer 2

It's entirely possible to do this. You could have your default code as something like this (mobile first approach) - you may need to play around with the percentage to make sure the two fit side by side:
.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;
}
and then add a media query at the end (again adjust the min-width to suit you) that brings them back to the four column layout as you currently have it, as the screen widens.
#media (min-width: 25em){
.recent_view_prod ul.product_list_widget li {
width: 22%;
}
}