To stack your span elements, you can utilize display:block.
Alternatively, you may opt for a smaller line-height and margin to maintain consistent spacing between lines of spans. Using font-size calculated from a combination of px and vw values can also be beneficial.
Demonstration screenshot and concept are shown below:
https://i.sstatic.net/17GI9.jpg
.big-text {
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
text-justify: inter-character;
font-size:calc(12px + 2.45vw);
line-height: 0.7;
background:gray;/*see me for debug*/
}
.big-text>span {
display: block;
width:max-content;
margin:8px auto ;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-md-4 big-text">
<span>FIREWORK</span>
<span style="font-size:1.45em">& PYRO</span>
<span style="color: #fd0227; font-size: 1.65em">FIRING</span>
<span style="font-size:1.17em;">SYSTEMS</span>
</div>
</div>
</div>
Media queries can also be utilized to resize text and modify layout. An example of using media queries to set the first span sideways on larger screens is provided below. View the demo here: https://codepen.io/gc-nomade/pen/abNKbyP or see snippet below.
https://i.sstatic.net/O9zqZ.jpg
.big-text {
font-family: "Roboto Condensed", sans-serif;
font-weight: bold;
text-justify: inter-character;
font-size: calc(12px + 2.45vw);
line-height: 0.7;
background: gray;
/*see me for debug*/
}
.big-text>span {
display: block;
width: max-content;
margin: 8px auto;
white-space: nowrap;
}
@media screen and (min-width: 769px) {
.vertical-md {
writing-mode: vertical-rl;
transform: scale(-1);
font-size: 0.615em;
color:#fd0227;
-webkit-text-stroke:1px #fff
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-md-4 big-text">
<span class="float-md-left vertical-md">FIREWORK</span>
<span style="font-size:1.45em">& PYRO</span>
<span style="color: #fd0227; font-size: 1.65em">FIRING</span>
<span style="font-size:1.17em;">SYSTEMS</span>
</div>
</div>
</div>