如何基于屏幕尺寸修改div内容，Flask+Bootstrap场景下如何实现？

完全可以实现，不需要引入额外的前端框架，用CSS媒体查询或者Bootstrap自带的响应式工具类就能完成需求，甚至不需要写JS代码。

方案1：使用Bootstrap自带响应式工具类（推荐） #

Bootstrap内置了响应式显示/隐藏类，直接给需要在小屏隐藏的内容套上对应类即可，修改index.html中指数渲染部分的代码：

<div class="col-sm-2 text-center">
  {% set d = total_payload.get('indexes').get(index) %}
  {# 指数名称始终显示 #}
  {{ index }}
  {# 价格仅在sm及以上屏幕显示 #}
  <span class="d-none d-sm-inline">{{ " ${:.2f}".format(d['current_price']) }}</span>
  {# 1日涨跌幅仅在sm及以上屏幕显示 #}
  <span class="d-none d-sm-inline">{{ " {:0.2f}% 1-Day".format(d['percent_change']) }}</span>
  {# YTD涨跌幅始终显示 #}
  {{ " {:0.2f}% YTD".format(d['ytd_percent_change']) }}
</div>

d-none d-sm-inline的含义是：默认隐藏，当屏幕宽度≥576px（Bootstrap的sm断点）时以行内元素显示，刚好满足小屏隐藏的需求。
如果希望小屏时指数项排版更美观，还可以把列类修改为col-6 col-sm-2，这样移动端每排放2个指数项，避免单个项占满整行过于松散。

方案2：自定义CSS媒体查询 #

如果你不想依赖Bootstrap的类，也可以自己写媒体查询实现：

1. 先给需要隐藏的内容加自定义类：

<div class="col-sm-2 text-center">
  {% set d = total_payload.get('indexes').get(index) %}
  {{ index }}
  <span class="hide-on-small">{{ " ${:.2f}".format(d['current_price']) }}</span>
  <span class="hide-on-small">{{ " {:0.2f}% 1-Day".format(d['percent_change']) }}</span>
  {{ " {:0.2f}% YTD".format(d['ytd_percent_change']) }}
</div>

2. 在style.css中添加媒体查询规则：

/* 屏幕宽度小于576px时隐藏对应元素 */
@media (max-width: 575.98px) {
  .hide-on-small {
    display: none;
  }
}

两种方案都可以完美实现需求，不需要额外的前端框架支持。

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