Switching CSS Classes Based on Screen Size

    const classList = document.querySelectorAll(".is-pulled-right")
    
window.addEventListener("resize", function () {

    if(window.innerWidth < 700) {   
        classList.forEach( item => {
        item.classList.remove("is-pulled-right")})
    } 
 
    else{
      console.log('more')
        classList.forEach( item => {
        item.classList.add("is-pulled-right")})
    }
}); 

<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" rel="stylesheet"/>
<section class="section">

  <div class="container">
    <div class="columns">
      <div class="column is-two-fifths">
        <h3 id="isRight" class="subtitle is-3 is-pulled-right ">First Title:</h3>
      </div><!-- column left-->
      <div class="column">
        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
      </div><!-- column right -->
    </div><!-- columns -->
  </div><!-- container -->
  
</section>

<section class="section">

  <div class="container">
    <div class="columns">
      <div class="column is-two-fifths">
        <h3 id="isRight" class="subtitle is-3 is-pulled-right ">Second Title:</h3>
      </div><!-- column left-->
      <div class="column">
        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
      </div><!-- column right -->
    </div><!-- columns -->
  </div><!-- container -->
  
</section>

Change CSS based on screen size

Coding for phones can be tricky since there's so many different scales and resolutions but I would recommend trying this https://stackoverflow.com/a/13550716/10816600 and if that doesn't work for you, you can redirect the phone users to another page that you have made work for phones.

https://css-tricks.com/snippets/javascript/redirect-mobile-devices/

Need to change class in CSS for a DIV based on different screen sizes

There is not way to change DOM property value using CSS. There is only way to achieve this using javascript.

How to use particular CSS styles based on screen size / device

Use @media queries. They serve this exact purpose. Here's an example how they work:

@media (max-width: 800px) {
  /* CSS that should be displayed if width is equal to or less than 800px goes here */
}

This would work only on devices whose width is equal to or less than 800px.

Read up more about media queries on the Mozilla Developer Network.

Change Height based on screensize

this is a good use case for media queries... h-100 is basically adding 100% height;

snippet below:

nav {
  border: 1px solid red;
}

@media screen and (min-width:579px) {
  nav {
    border: 1px solid green;
    height: 100vh;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


<div class="container">
  <nav class="navbar-nav navbar-expand-sm flex-column navbar-dark col-sm-2 fixed-top">
    <div>
      <a href="{{url_for('index')}}" class="navbar-brand">
        <img src="https://akberiqbal.com/favicon.ico" height="50px">
      </a>
      <button class="navbar-toggler col-2 float-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
    </div>
    <div class="collapse navbar-collapse flex-column" id="navbarResponsive">
      <a class=" nav-link {{ 'active' if active_page == 'new_user' else '' }}" href="{{url_for('new_user')}}">Sign Up</a>
      <a class="nav-link {{ 'active' if active_page == 'new_comment' else '' }}" href="{{url_for('new_comment')}}">Opine</a>
    </div>
  </nav>
</div>