如何操作<a>标签内内容 实现卡片图标与描述的响应式对齐

核心基于你已用的Bootstrap栅格系统+flex布局特性实现需求，无需大改原有结构。

1. 修改HTML结构 #

调整列的响应式占比与排列顺序，适配不同屏幕的展示逻辑：

<div class="myCard">
  <div class="container-fluid relative-position">
    <a class="col col-12 link-style" (click)="onClicked()">
      <div class="row content">
        <!-- 文字区域：小屏占8列，大屏占12列，大屏排序靠后 -->
        <div class="col col-8 order-md-2">
          <div class="information">
            <h1 id="title" role="heading" class="title">{{ title }}</h1>
            <p id="description" role="text" class="description">{{ description }}</p>
          </div>
        </div>
        <!-- 图片区域：小屏占4列，大屏占12列，大屏排序靠前 -->
        <div class="col col-4 col-md-12 order-md-1 image" [ngStyle]="{'background-image': getURLfromImage()}">
        </div>
      </div>
    </a>
  </div>
</div>

2. 调整CSS样式 #

补充响应式规则、背景图容器高度等缺失样式，同时修正原有选择器不匹配的问题：

.myCard {
  .content {
    width: 100%;
    align-items: center;
  }
  /* 修正原有选择器和HTML类不匹配的问题 */
  .link-style {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 9px;
    overflow: hidden;
    cursor: default;
    padding: 12px;
    box-sizing: border-box;
  }
  .image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 6px;
    /* 小屏背景图高度 */
    height: 80px;
  }
  .title {
    font-size: 18px;
    margin: 0 0 4px 0;
  }
  .description {
    font-size: 14px;
    margin: 0;
    color: #666;
  }
  /* 大屏断点可自行调整，此处用Bootstrap默认md断点768px */
  @media (min-width: 768px) {
    .content {
      flex-direction: column;
      align-items: stretch;
    }
    .image {
      /* 大屏背景图高度 */
      height: 160px;
      margin-bottom: 12px;
    }
  }
}

3. 实现效果 #

• 屏幕宽度<768px时：文字与图片横向排列在同一行，左文右图
• 屏幕宽度≥768px时：图片在上，文字描述在下方纵向排列

如果你的项目没有引入Bootstrap，只需要把栅格对应的宽度、order逻辑换成自定义媒体查询实现即可，核心逻辑一致。

内容的提问来源于stack exchange，提问作者J. Esteves