How to change div content based on screen size - html

Question

I would like to change the content of the row divs inside the indices_container when the screen becomes small. Currently, on all screen sizes, each row shows the index name, price, 1-day change, and ytd change. I would only like to show the index name and ytd change on small screens.
I am only using Flask and bootstrap to serve my application so I am not even sure if this is even possible without something like react and vue. Can this be done with #media or browser JS?
index.html file:
{% extends 'base.html' %}
{% block body %}
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
{{message}}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<div class="indices-container">
<div class="row">
{% for index in total_payload.get('indexes').get('meta_data') %}
<div class="col-sm-2 text-center">
{% set d = total_payload.get('indexes').get(index) %}
{{ "{} ${:.2f}".format(index, d['current_price']) }}
{{ "{:0.2f}% 1-Day".format(d['percent_change']) }}
{{ "{:0.2f}% YTD".format(d['ytd_percent_change']) }}
</div>
{% endfor %}
</div>
</div>
<div class="sp500-table-container">
<div class="table-responsive" id="sp500Table">
<table class="table table-light table-striped table-sm" id="sp500Table">
<thead class="thead-light">
<tr> {% for col in total_payload.get('companies').get('meta_data') %}
<th>{{ col }}</th>
{% endfor %}
</tr>
</thead>
<tbody> {% for num, r in enumerate(total_payload.get('companies').get('sp500companies')) %}
<tr>
<td>{{ num+1 }}</td>
<td>{{ r.get('Symbol') }}</td>
<td>{{ r.get('Security') }}</td>
<td>link</td>
<td>{{ r.get('Sector') }}</td>
<td>{{ r.get('SubSector') }}</td>
<td>{{ r.get('Headquarters') }}</td>
<td>{{ r.get('DateFirstAdded') }}</td>
</tr> {% endfor %}
</tbody>
</table>
</div>
</div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p.name-price").css("color", "red");
});
});
</script>
{% endblock %}
style.css file:
html {
font-family: Arial, Helvetica, sans-serif;
}
body {
/* padding-bottom: 80px; */
/* height: 100% */
}
main {
/* display: flex; */
/* flex-direction: column; */
/* flex-grow: 1; */
padding-bottom: 80px;
overflow: hidden;
}
footer {
padding-top: 80px;
}
.indices-container {
margin: auto;
}
.sp500-table-container {
height: 70vh;
width: 100vw;
overflow: auto;
position: relative;
padding-bottom: 16px;
margin: auto;
/* flex: 1; */
/* margin-bottom: 16px; */
}

Answer 1

This is done with css native Media Queries, no additional libraries needed.
It would look something like this:
#media (max-width: 400px){
.indicie-payment { display: none; }
...
}
BUT
Since you said you are already using Bootstrap, you can use some utility classes for display that are already provided by Bootstrap
In your case you would need to wrap some of your items in an element like div or span and use a utility class like d-sm-none
So it might look something like this:
<div class="indices-container">
<div class="row">
{% for index in total_payload.get('indexes').get('meta_data') %}
<div class="col-sm-2 text-center">
{% set d = total_payload.get('indexes').get(index) %}
<span class="d-sm-none">{{ "{} ${:.2f}".format(index, d['current_price']) }}</span>
<span class="d-sm-none">{{ "{:0.2f}% 1-Day".format(d['percent_change']) }}</span>
{{ "{:0.2f}% YTD".format(d['ytd_percent_change']) }}
</div>
{% endfor %}
</div>
</div>