/* Mobile reordering for consistent content-then-image layout */

@media (max-width: 767px) {
  /* Make the two-col rows flex containers on mobile */
  .content-section .two-col.row {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  
  /* Force col-1 (content) to always appear first */
  .content-section .two-col .col-1 {
    -webkit-box-ordinal-group: 2 !important;
    -ms-flex-order: 1 !important;
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Force col-2 (images) to always appear second */
  .content-section .two-col .col-2 {
    -webkit-box-ordinal-group: 3 !important;
    -ms-flex-order: 2 !important;
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Add spacing between content and images */
  .content-section .two-col .col-1 {
    margin-bottom: 20px;
    padding-bottom: 0;
  }
  
  .content-section .two-col .col-2 {
    margin-bottom: 30px;
  }
  
  /* Remove any Bootstrap float styles that might interfere */
  .content-section .two-col [class*="col-"] {
    float: none !important;
    position: relative !important;
  }
}