https://idea-hack.com/en/blog/18459/
The solution when Gutenberg’s “Column” block does not correspond to responsive style.

The solution when Gutenberg’s “Column” block does not correspond to responsive style.

We will show how to respond when the core block “Column” of WordPress’s new editor “Gutenberg” does not support responsive layout properly.

Perhaps a bug, WordPress has prepared a “Column” block and supports displaying it in a layout of 2 columns or more, but it does not display it properly when outputting to the front screen.

Specifically, it is displayed in 1 Column. (As of Gutenberg 4.1)

Therefore, adding CSS code is necessary to make Columns over 2 Columns properly responsive. We will introduce the current CSS applied at this site for this issue.

By writing this code, “column” layout can be displayed properly regardless of Columns number.

css

.wp-block-columns .wp-block-column {
  margin: 0 10px
}

.wp-block-columns .wp-block-column:first-child {
  margin-left: 0px
}

.wp-block-columns .wp-block-column:last-child {
  margin-right: 0px
}

@media screen and (max-width:768px) {
  .wp-block-columns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
  }
  .wp-block-columns .wp-block-column {
    margin: 0 0 20px 0
  }

If necessary, customize the above code, and you will be able to set the way you want it, so please refer as a base.