当然可以实现这个需求！这在响应式设计里是非常常见的场景，借助CSS的媒体查询就能轻松搞定。下面给你两种常用的实现思路，你可以根据自己的项目需求选择：

移动优先方案（推荐） #

这种方式先针对小屏幕设备定义样式，再覆盖大屏幕的样式，符合现代响应式设计的最佳实践：

/* 默认状态（小屏幕）：不显示右侧边框 */
.border-lg-right {
  border-right: none;
  /* 可添加其他基础样式，比如内边距、背景色等 */
  padding: 1rem;
}

/* 当屏幕宽度≥1200px时（你可以根据项目需求调整这个断点值），显示右侧边框 */
@media (min-width: 1200px) {
  .border-lg-right {
    border-right: 1px solid #ddd; /* 自定义边框的宽度、样式、颜色 */
  }
}

桌面优先方案 #

如果你习惯先从大屏幕开始设计，也可以反过来写：

/* 默认状态（大屏幕）：显示右侧边框 */
.border-lg-right {
  border-right: 1px solid #ddd;
  padding: 1rem;
}

/* 当屏幕宽度<1200px时，隐藏右侧边框 */
@media (max-width: 1199.98px) {
  .border-lg-right {
    border-right: none;
  }
}

小提示 #

• 断点数值可以根据你的设计需求修改，比如常见的992px（Bootstrap的lg断点）、1200px等都是主流选择。
• 边框的样式、颜色、宽度都可以完全自定义，比如换成2px dashed #f00这类个性化样式。

内容的提问来源于stack exchange，提问作者Nick Maroulis