sorry if the question isn't clear enough but let me explain what is happened to me.
now I have 5 graphs that have been created by Pandas and want to use jquery to affect on grid system in bootstrap. all the divs have the following class "col-md-6" except the last child which has "col-md-12", what I would like to do is: to add "col-md-6" to the last child in case of the length of graphs are even number and remove the "col-md-12" from the last one.
actually, this process is working and the class becomes added to the last child after the document is ready, however, the last graph does apply "col-md-12" and does not apply "col-md-6" even though, it has "col-md-6" but when I do a resize for the page the graph starts to apply "col-md-6" on it.
the question is How can I apply the "col-md-6" dynamically without doing resize for the page?
you can see the behavior before and after resize to understand what I mean exactly:-
before do resize

after doing a resize

The code is like so:-
...
<div class="col-md-6 error-graph">
{% if regular_group %}
<div style="">
<div style="max-width: 100%;max-height: 100%">
{{ regular_group|safe }}
</div>
</div>
{% endif %}
</div>
<div class="col-md-12 error-graph">
{% if complex_group %}
<div style="">
<div style="max-width: 100%;max-height: 100%">
{{ complex_group|safe }}
</div>
</div>
{% endif %}
</div>
<script>
function add_class(last_child) {
let error_graph = $(".error-graph");
if (error_graph.length % 2 === 0) {
last_child.removeClass("col-md-12").addClass("col-md-6");
}
return last_child;
}
function resize_graph() {
{#$(add_class).width($(this).css("width"));#}
let func = add_class($(".error-graph:last-child"));
console.log(func);
{#$(document).load(func.setWidth = 10);#}
}
$(document).ready(function () {
resize_graph();
});
</script>