blog_front/src/components/blogs/ceshi.vue

<template>
  <a-row :gutter="16">
    <a-col :xl="24" :xs="12">
      <div class="responsive-box">Content 1</div>
    </a-col>
    <a-col :xs="12">
      <div class="responsive-box">Content 2</div>
    </a-col>
    <a-col  :xs="12">
      <div class="responsive-box">Content 3</div>
    </a-col>
    <!-- <a-col :xl="4">
      <div class="responsive-box">Content 2</div>
    </a-col>
    <a-col  :xl="4">
      <div class="responsive-box">Content 2</div>
    </a-col>
    <a-col :xl="4">
      <div class="responsive-box">Content 2</div>
    </a-col> -->
  </a-row>
</template>

<style>
.responsive-box {
  background-color: #f0f0f0;
  text-align: center;
}
</style>