Template:ROH Soldier/styles.css

/* Responsive layout for displaying the image above the table when the screen size is reduced 
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 5px;
}

.roh-column {
  flex: 0 1 auto;
  max-width: 100%;
  margin: 5px;
}

@media (max-width: 800px) {
  .roh-column {
    flex: 0 1 auto;
    max-width: 100%;
  }
} */

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-image {
  padding: 10px;
  flex: 40%;
}

.flex-table {
  padding: 10px;
  flex: 60%;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-image, .flex-table {
    flex: 100%;
  }
}