feat(/collection/{slug}): show a list of series at the end on small devices.

See this article also:
https://web3canvas.com/re-order-columns-in-mobile-devices-using-bootstrap-3/

Fix #981

Author: php-coder

src/main/webapp/WEB-INF/views/collection/info.html

@@ -89,33 +89,7 @@ <h3 class="text-center" th:text="#{t_collection_of(${ownerName})}">
 					/*/-->
 
 					<div class="row">
-						<div class="col-sm-4">
-							<ul th:if="${not #lists.isEmpty(seriesOfCollection)}" th:remove="all-but-first">
-								<li th:each="series : ${seriesOfCollection}">
-									<a href="../series/info.html" th:href="@{${INFO_SERIES_PAGE}(id=${series.id})}">
-										<span th:remove="tag" th:text="|${series.category}, |">Animals, </span>
-										<span th:remove="tag" th:if="${series.country != null}" th:text="|${series.country}, |">Italy, </span>
-										<span th:remove="tag" th:if="${series.releaseYear != null}" th:text="|${series.releaseYear}, |">1999, </span>
-										<span th:remove="tag" th:text="|${series.quantity}&nbsp;${series.quantity != 1 ? '__#{t_stamps}__' : '__#{t_stamp}__'}|">7&nbsp;stamps</span>
-										<span th:remove="tag" th:if="${not series.perforated}" th:text="|(#{t_wo_perforation_short})|">(without perforation)</span>
-									</a>
-									<!--/*/
-									<span class="label label-default"
-										th:if="${series.quantity != series.numberOfStamps}"
-										th:text="#{t_m_out_of_n(${series.numberOfStamps}, ${series.quantity})}"></span>
-									/*/-->
-									<span th:if="${justAddedSeriesId != null and justAddedSeriesId == series.id}" class="label label-success">New</span>
-								</li>
-								<li>
-									<a href="../category/info.html">Animals, Italy, 22&nbsp;stamps</a>
-									<span class="label label-default">20 out of 22</span>
-								</li>
-								<li>
-									<a href="../category/info.html">Animals, Italy, 1983, 5&nbsp;stamps</a>
-								</li>
-							</ul>
-						</div>
-						<div class="col-sm-2">
+						<div class="col-sm-2 col-md-push-4">
 							<!--/*/
 							<th:block togglz:active="SHOW_COLLECTION_STATISTICS" th:if="${not #lists.isEmpty(seriesOfCollection)}">
 							/*/-->
@@ -134,22 +108,48 @@ <h4 class="panel-title" th:text="#{t_in_collection}">In this collection</h4>
 							</th:block>
 							/*/-->
 						</div>
-						<div class="col-sm-3">
+						<div class="col-sm-3 col-md-push-4">
 							<div class="panel panel-default" togglz:active="SHOW_COLLECTION_CHARTS" th:if="${not #lists.isEmpty(seriesOfCollection)}">
 								<div class="panel-heading">
 									<h4 class="panel-title" th:text="#{t_stamps_by_countries}">Stamps by countries</h4>
 								</div>
 								<div id="countries-chart" class="panel-body no-padding"></div>
 							</div>
 						</div>
-						<div class="col-sm-3">
+						<div class="col-sm-3 col-md-push-4">
 							<div class="panel panel-default" togglz:active="SHOW_COLLECTION_CHARTS" th:if="${not #lists.isEmpty(seriesOfCollection)}">
 								<div class="panel-heading">
 									<h4 class="panel-title" th:text="#{t_stamps_by_categories}">Stamps by categories</h4>
 								</div>
 								<div id="categories-chart" class="panel-body no-padding"></div>
 							</div>
 						</div>
+						<div class="col-sm-4 col-md-pull-8">
+							<ul th:if="${not #lists.isEmpty(seriesOfCollection)}" th:remove="all-but-first">
+								<li th:each="series : ${seriesOfCollection}">
+									<a href="../series/info.html" th:href="@{${INFO_SERIES_PAGE}(id=${series.id})}">
+										<span th:remove="tag" th:text="|${series.category}, |">Animals, </span>
+										<span th:remove="tag" th:if="${series.country != null}" th:text="|${series.country}, |">Italy, </span>
+										<span th:remove="tag" th:if="${series.releaseYear != null}" th:text="|${series.releaseYear}, |">1999, </span>
+										<span th:remove="tag" th:text="|${series.quantity}&nbsp;${series.quantity != 1 ? '__#{t_stamps}__' : '__#{t_stamp}__'}|">7&nbsp;stamps</span>
+										<span th:remove="tag" th:if="${not series.perforated}" th:text="|(#{t_wo_perforation_short})|">(without perforation)</span>
+									</a>
+									<!--/*/
+									<span class="label label-default"
+										th:if="${series.quantity != series.numberOfStamps}"
+										th:text="#{t_m_out_of_n(${series.numberOfStamps}, ${series.quantity})}"></span>
+									/*/-->
+									<span th:if="${justAddedSeriesId != null and justAddedSeriesId == series.id}" class="label label-success">New</span>
+								</li>
+								<li>
+									<a href="../category/info.html">Animals, Italy, 22&nbsp;stamps</a>
+									<span class="label label-default">20 out of 22</span>
+								</li>
+								<li>
+									<a href="../category/info.html">Animals, Italy, 1983, 5&nbsp;stamps</a>
+								</li>
+							</ul>
+						</div>
 					</div>
 				</div>
 			</div>