.discourse-patrons-section-columns { display: flex; justify-content: space-between; @include breakpoint(medium) { flex-direction: column; } .section-column { min-width: calc(50% - 0.5em); max-width: 100%; &:last-child { margin-left: 0.5em; } &:first-child { margin-right: 0.5em; } @include breakpoint(medium) { min-width: 100%; &:last-child { order: 2; } &:first-child { order: 1; } } } } #card-element { padding: 20px 0; } .discourse-patrons-section-columns { margin: 20px; padding: 20px; border: 1px $primary-low-mid solid; background-color: $primary-low; } #card-action { margin: 20px 0; } .discourse-patrons-confirmation { width: 100%; td { padding: 10px; } }