media query being overridden?

[jmorin]

I needed a layout with two columns where the content alternated left and right and that converted to one column with the content in the proper order at smaller sizes.
I couldn’t find this layout in any of the demos or options. I managed to get a version of my own working standalone, but when I add it to one of the templated pages, the responsiveness breaks somewhat.At smaller sizes, all the styling gets removed. There’s a media query in the custom css, however, as a test, I deleted it and discovered it’s being ignored and the default responsiveness converts the layout to a single column. Like I said, when this happens the styling is removed.
Something has to be interfering with it but I can’t figure out what

Here’s the html:

<div class="container">
				  <div class="row">
					<div class="column left">Left Content 1</div>
					<div class="column right">Right Content 1</div>
				  </div>
				  <div class="row reverse">
					<div class="column left">Left Content 2</div>
					<div class="column right">Right Content 2</div>
				  </div>
				  <div class="row">
					<div class="column left">Left Content 3</div>
					<div class="column right">Right Content 3</div>
				  </div>
				</div>

Here’s the css

.row {
     display: flex;
     flex-direction: row;
     margin-bottom: 20px;
   }
   
   .row.reverse {
     flex-direction: row-reverse;
   }
   
   .column {
     flex: 1;
     padding: 40px;
     color: #000;
   }
   
   .left {
     background-color: #f0f0f0;
   }
   
   .right {
     background-color: #d0eaff;
   }
   
   /* responsive */
   @media (max-width: 768px) {
     .row,
     .row.reverse {
      flex-direction: column; !important;
     }
   
     .column {
      width: 100%; !important;
     }
   }

I also tested renaming each class like alt-row, alt-column in case of any crossover in naming, but it didn’t make a difference.

---

Template Version: business consulting 3

[Support]

Hello, you can do that with order classes from Bootstrap.

References:
https://getbootstrap.com/docs/5.0/utilities/flex/#order
https://dev.to/codeply/re-order-grid-columns-in-bootstrap-5-135k

---

[Author]

Posts