Responsive design (Java)

Bootstrap has CSS variations for handling different layouts, or you can put logic in your View code to do this server side based on the parent container width (in grid units) which you can access through @ViewBag.ContainerSize

For example, if the container size is 12 for the first offer and 6 for the second two, you can add logic in our view to only show the description if the container size is greater than 6. You can also check the screen width to prevent rendering of images on small screens (saving screen space and bandwidth) using the WebRequestContext.ScreenWidth value.

You can optimize the @Html.Media helper method as you are only showing the image in a half width column. If you pass in a container size that is half of the current context container size—passing in ViewBag.ContainerSize / 2 as the value for the containerSize parameter on the Media method—you get a resized image closer to the best fit for the screen size:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="dxa" uri="http://www.sdl.com/tridion-dxa" %> 
<%@ taglib prefix="xpm" uri="http://www.sdl.com/tridion-xpm" %>

<jsp:useBean id="entity" type="com.sdl.webapp.common.api.model.entity.ContentList" scope="request"/>
<jsp:useBean id="markup" type="com.sdl.webapp.common.markup.Markup" scope="request"/>

<div class="rich-text ${entity.htmlClasses}" ${markup.entity(entity)}>
    <c:choose>
        <c:when test="${not empty entity.image and screenWidth != 'EXTRA_SMALL'}">
            <div class="col-sm-6" ${markup.property(entity, "image")}>
                <dxa:media media="${entity.image}" aspect="100%" widthFactor="1" />
            </div>
        </c:when>
        <c:otherwise>
		    <div class="col">
			<div class="title">
				<h1 ${markup.property(entity, "headline")}>${entity.headline}</h1>
					<c:if test="${entity.containerSize > 6}">
						<p ${markup.property(entity, "description")}>${entity.description}</p>
					</c:if>	
				    <br/>
			    <p class= "meta small">valid until <span ${markup.property(entity, "expiryDate")}>${entity.expiryDate}</p>
			</div>
			</div>
		</c:otherwise>
    </c:choose>
</div>