From 2558a104948a978e3dc1387221daf041210cd15c Mon Sep 17 00:00:00 2001
From: Andrew Engelbrecht <andrew@fsf.org>
Date: Wed, 31 Jul 2019 15:58:18 -0400
Subject: [PATCH] added a hack so rows don't get jumbled up

when there are tall and short divs mixed up in a row, sometimes the next
div in the following row starts off behind the end of a taller div from
the previous row. this code should resolve that issue.
---
 css/bootstrap-auto-clear.css | 29 +++++++++++++++++++++++++++++
 ryf.libraries.yml            |  1 +
 2 files changed, 30 insertions(+)
 create mode 100644 css/bootstrap-auto-clear.css

diff --git a/css/bootstrap-auto-clear.css b/css/bootstrap-auto-clear.css
new file mode 100644
index 0000000..d8f4f4e
--- /dev/null
+++ b/css/bootstrap-auto-clear.css
@@ -0,0 +1,29 @@
+/* https://stackoverflow.com/questions/26939104/clear-rows-when-doing-multi-responsive-columns-bootstrap/33540628#33540628 */
+@media (min-width:1200px){
+    .auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
+    .auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
+    .auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
+    .auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
+    .auto-clear .col-lg-6:nth-child(odd){clear:left;}
+}
+@media (min-width:992px) and (max-width:1199px){
+    .auto-clear .col-md-1:nth-child(12n+1){clear:left;}
+    .auto-clear .col-md-2:nth-child(6n+1){clear:left;}
+    .auto-clear .col-md-3:nth-child(4n+1){clear:left;}
+    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
+    .auto-clear .col-md-6:nth-child(odd){clear:left;}
+}
+@media (min-width:768px) and (max-width:991px){
+    .auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
+    .auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
+    .auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
+    .auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
+    .auto-clear .col-sm-6:nth-child(odd){clear:left;}
+}
+@media (max-width:767px){
+    .auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
+    .auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
+    .auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
+    .auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
+    .auto-clear .col-xs-6:nth-child(odd){clear:left;}
+}
diff --git a/ryf.libraries.yml b/ryf.libraries.yml
index 54767e9..ea19261 100644
--- a/ryf.libraries.yml
+++ b/ryf.libraries.yml
@@ -4,6 +4,7 @@ framework:
      css/bootstrap.css: {}
      css/drupal-bootstrap.css: {}
      css/style.css: {}
+     css/bootstrap-auto-clear.css: {}
 
   js:
     js/hacks.js: {}
-- 
2.25.1