Flex display to fix columns issue

cps/static/css/style.css

@@ -107,6 +107,11 @@ a, .danger,.book-remove, .editable-empty, .editable-empty:hover { color: #45b29d
   text-decoration: none;
 }
 
+.row.display-flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .container-fluid img {
   display: block;
   max-width: 100%;
@@ -116,7 +121,11 @@ a, .danger,.book-remove, .editable-empty, .editable-empty:hover { color: #45b29d
 .container-fluid .discover{ margin-bottom: 50px; }
 .container-fluid .new-books { border-top: 1px solid #ccc; }
 .container-fluid .new-books h2 { margin: 50px 0 0 0; }
-.container-fluid .book { margin-top: 20px; }
+.container-fluid .book {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+}
 
 .container-fluid .book .cover {
   height: 225px;

cps/templates/author.html

@@ -34,7 +34,7 @@
         <div id="all" class="btn btn-primary">{{_('All')}}</div>
       </div-->
     </div>
-  <div class="row">
+  <div class="row display-flex">
     {% if entries[0] %}
     {% for entry in entries %}
     <div id="books" class="col-sm-3 col-lg-2 col-xs-6 book">

cps/templates/discover.html

@@ -2,7 +2,7 @@
 {% block body %}
 <div class="discover load-more">
   <h2>{{title}}</h2>
-  <div class="row">
+  <div class="row display-flex">
     {% for entry in entries %}
     <div class="col-sm-3 col-lg-2 col-xs-6 book">
       <div class="cover">

cps/templates/grid.html

@@ -23,7 +23,7 @@
     </div>
 
     {% if entries[0] %}
-        <div id="list" class="row">
+        <div id="list" class="row display-flex">
           {% for entry in entries %}
               <div class="col-sm-3 col-lg-2 col-xs-6 book sortable" {% if entry[0].sort %}data-name="{{entry[0].series[0].name}}"{% endif %} data-id="{% if entry[0].series[0].name %}{{entry[0].series[0].name}}{% endif %}">
                   <div class="cover">

cps/templates/index.html

@@ -3,7 +3,7 @@
 {% if g.user.show_detail_random() %}
 <div class="discover random-books">
   <h2 class="random-books">{{_('Discover (Random Books)')}}</h2>
-  <div class="row">
+  <div class="row display-flex">
    {% for entry in random %}
     <div class="col-sm-3 col-lg-2 col-xs-6 book" id="books_rand">
       <div class="cover">
@@ -73,7 +73,7 @@
       </div-->
     </div>
 
-  <div class="row">
+  <div class="row display-flex">
     {% if entries[0] %}
     {% for entry in entries %}
     <div class="col-sm-3 col-lg-2 col-xs-6 book" id="books">

cps/templates/search.html

@@ -35,7 +35,7 @@
       </div>
   {% endif %}
 
-  <div class="row">
+  <div class="row display-flex">
     {% for entry in entries %}
     <div class="col-sm-3 col-lg-2 col-xs-6 book">
       <div class="cover">

cps/templates/shelf.html

@@ -12,7 +12,7 @@
       <a id="order_shelf" href="{{ url_for('shelf.order_shelf', shelf_id=shelf.id) }}" class="btn btn-primary">{{ _('Change order') }} </a>
     {% endif %}
   {% endif %}
-  <div class="row">
+  <div class="row display-flex">
 
     {% for entry in entries %}
     <div class="col-sm-3 col-lg-2 col-xs-6 book">

cps/templates/shelfdown.html

@@ -29,7 +29,7 @@
 {% block body %}
 <div class="discover">
   <h2>{{title}}</h2>
-  <div class="row">
+  <div class="row display-flex">
 
     {% for entry in entries %}
     <div class="col-sm-3 col-lg-2 col-xs-6 book">