Splitting content of arrays into different line - php

Question

I'm trying to have each element of an array to start on a new line while allowing other content to be on the same line.
//arrays of plannames
$planname_num=array(1=>"Alpha","Omega","Gamma");
//arrays of planlevels
$planlevels_num=array(1=>"Bronze","Silver","Gold");
/*
*
* Get The Length of Plan Name Array
*
*
*/
$planname_array_length=count($planname_num);
/*
*
* Get The Length of Plan Level Array
*
*
*/
$planlevel_array_length=count($planlevels_num);
$pnArrayLength=$planname_array_length;
$plArrayLength=$planlevel_array_length;
for ($pn=1; $pn <= $pnArrayLength; $pn++) {//loop to create plan name indicators
for ($pl=1; $pl <= $plArrayLength; $pl++) {//loop to create plan level indicators
//Create pricing for each plan from db
$getplansql = "SELECT SUM(`planPrice`) AS planPrice,planDescription FROM `plans`
WHERE planName = '$planname_num[$pn]' AND planLevel = '$planlevels_num[$pl]'";
$resultplans = $conn->query($getplansql);
while($plan = mysqli_fetch_assoc($resultplans)) {$i++;// output data of each row
//calculate sales price
$finalpricing = ($plan['planPrice'] * 0.7) + ($plan['planPrice']);
//create plan card
$resultplanarray.= '
<div class="col-lg-2">
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>'.$planname_num[$pn].'</h3>
<h3>'.$planlevels_num[$pl].'</h3>
</div>
<div class="panel-body text-center">
<p class="lead panel-body-pricing" style=""><strong>$'.round($finalpricing).'/month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-danger"></i>
'.$plan['planDescription'].'
</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-danger" href="#">BUY</a>
</div>
</div>
</div>';
}}}
//print result outside of while loop
echo $resultplanarray;
This code will output as follow until the grid of 12 is filled:
Alpha Alpha Alpha Omega Omega Omega
Bronze Silver Gold Bronze Silver Gold
I'd like the array to split and print the different plan groups each on a new line like this:
Alpha Alpha Alpha
Bronze Silver Gold
Omega Omega Omega
Bronze Silver Gold
How can this be achieved?

Answer 1

Add outer container for all plan name
$planname_num = array(1=>"Alpha","Omega","Gamma");
$planlevels_num = array(1=>"Bronze","Silver","Gold");
$planname_array_length = count($planname_num);
$planlevel_array_length = count($planlevels_num);
$resultplanarray = '';
for($i = 1; $i <= $planname_array_length ; $i++)
{
$resultplanarray .= '<div class="row">';
for($j = 1; $j <= $planlevel_array_length ; $j++)
{
//YOUR QUERY DATA
}
$resultplanarray .= '</div>';
}
I have added <div class='row'>
Please check it and let me know if you have any issue

Answer 2

You could also do this with css without adding to the markup.
This works by styling every 3rd div from an index of 1 (3n+1), so will add the clear to divs 4,7,10 etc..
.col-lg-2 {
display: block;
float: left;
}
.col-lg-2:nth-child(3n+1) {
clear: left;
}
<div class="col-lg-2">
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>Alpha</h3>
<h3>Bronze</h3>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>Alpha</h3>
<h3>Silver</h3>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>Alpha</h3>
<h3>Gold</h3>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>Omega</h3>
<h3>Bronze</h3>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>Omega</h3>
<h3>Silver</h3>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>Omega</h3>
<h3>Gold</h3>
</div>
</div>
</div>