Responsive two‑column layout with Materialize CSS – grid, push/pull,

Learn how to create a two‑column design that stacks on small screens, reorders with push/pull, hides elements, and still works in IE11 by using Materialize’s 12‑column grid and responsive utilities.

Desired Outcome

Produce a two‑column layout that:

Displays side‑by‑side on viewports wider than 600 px (the m breakpoint).
Stacks vertically on smaller screens.
Reorders columns without changing the DOM order.
Hides the first column only on small screens.
Uses .responsive-img for images inside columns.
Falls back to a functional layout in browsers that lack full Flexbox support (IE11).

Prerequisites

Basic HTML5 knowledge.
Run the page in a modern browser (Chrome, Firefox, Edge) for initial testing.
Optional: A polyfill for Flexbox if you must support IE11 (e.g., css3-mediaqueries-js).

Focused Procedure

Include Materialize CSS and JavaScript

Place the following in the <head> of your HTML. Use the latest CDN version.

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" integrity="sha384-…" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" integrity="sha384-…" crossorigin="anonymous"></script>

Create the grid skeleton

Wrap content in a .container and a .row element. Inside the row, add two columns with .col.s12.m6 to make each column full width on small screens and half width on medium and larger screens.

<div class="container">
  <div class="row">
    <div class="col s12 m6" id="first-col">
      <!-- Content for first column -->
    </div>
    <div class="col s12 m6" id="second-col">
      <!-- Content for second column -->
    </div>
  </div>
</div>

Apply visibility control
Hide the first column only on small viewports with .hide-on-small-only. Add aria-hidden="true" to keep screen readers from announcing hidden content.
```
<div class="col s12 m6 hide-on-small-only" aria-hidden="true" id="first-col">
  
</div>
```
Reorder columns
To show the second column first on larger screens while preserving the DOM order, use .push-8 and .pull-4 (assuming 12‑column width). These classes shift the column visually without affecting accessibility order.
```
<div class="col s12 m6 push-8 pull-4" id="second-col">
  
</div>
```
Insert responsive images
Wrap images in .responsive-img so they scale with the column.
```
<img src="image.jpg" alt="Description" class="responsive-img">
```
Wrap content in a card panel for spacing
Use .card-panel to give a subtle shadow and padding.
```
<div class="card-panel">
  <h4>Heading</h4>
  <p>Paragraph text…</p>
</div>
```
Legacy‑browser fallback
IE11 cannot fully render Flexbox. Add a flex-box-fallback class that uses display: block; and float: left; for columns. Include this class in the row element via a @supports media query or a small inline script that detects Flexbox support.
```
<style>
  @supports not (display: flex) {
    .row {
      display: block;
    }
    .col {
      float: left;
      width: 50%;
    }
    .col.s12 {
      width: 100%;
    }
  }
</style>
```

Expected Checks

Viewport test: Resize the browser window. Verify that both columns sit side‑by‑side above 600 px and stack below.
Visibility test: At 600 px width, the first column should be hidden. Use DevTools to confirm the display: none style is applied.
Reorder test: Inspect the order or margin-left properties to confirm that the second column appears first visually while the markup order remains unchanged.
Image scaling test: Zoom in/out or resize the window to ensure images stay within their column boundaries.
Accessibility audit: Run Lighthouse or axe‑core to check that the visual order matches the DOM order and that hidden elements are marked with aria-hidden.
Legacy browser test: Open the page in IE11 or a browser that lacks Flexbox. Verify that columns still appear side‑by‑side and that the fallback CSS applies.

Recovery Options

If columns collapse unexpectedly in modern browsers, ensure that no conflicting global display rules are overriding Materialize’s .row and .col classes.
When the .push-8 / .pull-4 classes cause layout shifts, double‑check that the columns have explicit .m6 widths; otherwise, add .m6 or .m4 as needed.
For legacy browsers, if the fallback CSS is insufficient, consider adding a lightweight Flexbox polyfill or switching to a simple float‑based grid for those environments.
To restore visibility for hidden columns, remove the .hide-on-small-only class or adjust the breakpoint class (.hide-on-med-and-down, etc.).

Practical Verification Checklist

Test	Tool	Pass Criteria
Responsive layout	Browser dev‑tools (resize)	Columns stack at <600 px, side‑by‑side above
Visibility control	Dev‑tools (computed styles)	First column has `display:none` only on small screens
Reorder visual order	Dev‑tools (order/margin)	Second column appears before first visually
Image scaling	Responsive viewer	Images never overflow column width
Accessibility	Lighthouse/axe	No violations, correct `aria-hidden`
Legacy fallback	IE11	Columns still display correctly using float fallback

Conclusion

By combining Materialize’s 12‑column grid, responsive utilities, and a lightweight fallback, you can deliver a robust two‑column layout that works across devices and browsers while maintaining accessibility. The key is to keep the DOM order intact, use aria-hidden for elements that disappear, and verify each step with dev‑tools and automated audits.

Desired Outcome

Produce a two‑column layout that:

Displays side‑by‑side on viewports wider than 600 px (the m breakpoint).
Stacks vertically on smaller screens.
Reorders columns without changing the DOM order.
Hides the first column only on small screens.
Uses .responsive-img for images inside columns.
Falls back to a functional layout in browsers that lack full Flexbox support (IE11).

Prerequisites

Basic HTML5 knowledge.
Run the page in a modern browser (Chrome, Firefox, Edge) for initial testing.
Optional: A polyfill for Flexbox if you must support IE11 (e.g., css3-mediaqueries-js).

Focused Procedure

Include Materialize CSS and JavaScript

Place the following in the <head> of your HTML. Use the latest CDN version.

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" integrity="sha384-…" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" integrity="sha384-…" crossorigin="anonymous"></script>

Create the grid skeleton

Wrap content in a .container and a .row element. Inside the row, add two columns with .col.s12.m6 to make each column full width on small screens and half width on medium and larger screens.

<div class="container">
  <div class="row">
    <div class="col s12 m6" id="first-col">
      <!-- Content for first column -->
    </div>
    <div class="col s12 m6" id="second-col">
      <!-- Content for second column -->
    </div>
  </div>
</div>

Apply visibility control
Hide the first column only on small viewports with .hide-on-small-only. Add aria-hidden="true" to keep screen readers from announcing hidden content.
```
<div class="col s12 m6 hide-on-small-only" aria-hidden="true" id="first-col">
  
</div>
```
Reorder columns
To show the second column first on larger screens while preserving the DOM order, use .push-8 and .pull-4 (assuming 12‑column width). These classes shift the column visually without affecting accessibility order.
```
<div class="col s12 m6 push-8 pull-4" id="second-col">
  
</div>
```
Insert responsive images
Wrap images in .responsive-img so they scale with the column.
```
<img src="image.jpg" alt="Description" class="responsive-img">
```
Wrap content in a card panel for spacing
Use .card-panel to give a subtle shadow and padding.
```
<div class="card-panel">
  <h4>Heading</h4>
  <p>Paragraph text…</p>
</div>
```
Legacy‑browser fallback
IE11 cannot fully render Flexbox. Add a flex-box-fallback class that uses display: block; and float: left; for columns. Include this class in the row element via a @supports media query or a small inline script that detects Flexbox support.
```
<style>
  @supports not (display: flex) {
    .row {
      display: block;
    }
    .col {
      float: left;
      width: 50%;
    }
    .col.s12 {
      width: 100%;
    }
  }
</style>
```

Expected Checks

Viewport test: Resize the browser window. Verify that both columns sit side‑by‑side above 600 px and stack below.
Visibility test: At 600 px width, the first column should be hidden. Use DevTools to confirm the display: none style is applied.
Reorder test: Inspect the order or margin-left properties to confirm that the second column appears first visually while the markup order remains unchanged.
Image scaling test: Zoom in/out or resize the window to ensure images stay within their column boundaries.
Accessibility audit: Run Lighthouse or axe‑core to check that the visual order matches the DOM order and that hidden elements are marked with aria-hidden.
Legacy browser test: Open the page in IE11 or a browser that lacks Flexbox. Verify that columns still appear side‑by‑side and that the fallback CSS applies.

Recovery Options

If columns collapse unexpectedly in modern browsers, ensure that no conflicting global display rules are overriding Materialize’s .row and .col classes.
When the .push-8 / .pull-4 classes cause layout shifts, double‑check that the columns have explicit .m6 widths; otherwise, add .m6 or .m4 as needed.
For legacy browsers, if the fallback CSS is insufficient, consider adding a lightweight Flexbox polyfill or switching to a simple float‑based grid for those environments.
To restore visibility for hidden columns, remove the .hide-on-small-only class or adjust the breakpoint class (.hide-on-med-and-down, etc.).

Practical Verification Checklist

Test	Tool	Pass Criteria
Responsive layout	Browser dev‑tools (resize)	Columns stack at <600 px, side‑by‑side above
Visibility control	Dev‑tools (computed styles)	First column has `display:none` only on small screens
Reorder visual order	Dev‑tools (order/margin)	Second column appears before first visually
Image scaling	Responsive viewer	Images never overflow column width
Accessibility	Lighthouse/axe	No violations, correct `aria-hidden`
Legacy fallback	IE11	Columns still display correctly using float fallback

Build a Responsive Two‑Column Layout with Materialize CSS: Grid, Visibility, and Legacy‑Browser Graceful Degradation

Desired Outcome

Prerequisites

Focused Procedure

Expected Checks

Recovery Options

Practical Verification Checklist

Conclusion

0 replies

Your perspective belongs here.

Build a Responsive Two‑Column Layout with Materialize CSS: Grid, Visibility, and Legacy‑Browser Graceful Degradation

Desired Outcome

Prerequisites

Focused Procedure

Expected Checks

Recovery Options

Practical Verification Checklist

Conclusion

0 replies

Your perspective belongs here.