What is the better approach to display the accordion list element with in responsive container?

I created the following Ionic example in codepen which is based on the Accordion and Flex Box.

List of skills are populated in different columns inside the flex container which is responsive i.e., the number of columns in which skills are generated are depended on the screen size.

For screen-size >960 px, skills are displayed in 3 columns.

For screen-size >480 px && <960 px, skills are displayed in 2 columns.

For screen-size <480 px, skills are displayed in 1 column.

The Issue:

When we display skills in more than one column, everything seems to be fine until we expand a Skill having few sub-skills which is actually pushing whole row to down and creating some space to the side which is not acceptable and trying to figure out what is the best why to handle it at the same time it should responsive

For Example: if skills are populated in 2 columns and we expand Java skill, we can see that there is some space between iOS Development and Web Development. [![enter image description here][1]][1]

Please kindly help me out what are the different approaches we can adopt so that Skills are populated in different columns based on the screen-size and at the same time without any performance issues.

// HTML
<ion-content>
       <div class="flex-container wrap">
      <div ng-repeat="skill in skills">
        <ion-checkbox ng-model="skill.isSelected" ng-click="skillClick(skill)">
          {{ skill.name }}
          <i class="icon-right ion-chevron-right" ng-class="{rotate90deg : skill.isExpanded}" style="float:right" ng-show="skill.subSkills"></i>
        </ion-checkbox>

        <ion-checkbox ng-repeat="subSkill in skill.subSkills" class="item-accordion" ng-show="skill.isExpanded" ng-click="subSkillClick(skill, subSkill)" ng-model="subSkill.isChecked">
          {{ subSkill.name }}
        </ion-checkbox>
      </div>
    </div>
    </ion-content>

// CSS
.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    border: none;
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
}

.wrap {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-container.wrap > div {
    width: 50%;
}

@media (max-width: 320px) {
    .flex-container.wrap > div {
        width: 100%;
        max-width: 100%;
        text-overflow: '';
        white-space: nowrap;
        overflow: hidden;
    }
}

@media (min-width: 321px) {
    .flex-container.wrap > div {
        width: 100%;
        max-width: 100%;
        text-overflow: '';
        white-space: nowrap;
        overflow: hidden;
    }
}

@media (min-width: 480px) {
    .flex-container.wrap > div {
        width: calc(100% / 2);
        max-width: calc(100% / 2);
        text-overflow: '';
        white-space: nowrap;
        overflow: hidden;
    }
}

@media (min-width: 640px) {
    .flex-container.wrap > div {
        width: calc(100% / 2);
        max-width: calc(100% / 2);
        text-overflow: '';
        white-space: nowrap;
        overflow: hidden;
    }
}

@media (min-width: 960px) {
    .flex-container.wrap > div {
        width: calc(100% / 3);
        max-width: calc(100% / 3);
        text-overflow: '';
        white-space: nowrap;
        overflow: hidden;
    }
}

// JS
angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {

  $scope.skills = [{
        name: 'Java',
        isSelected: false,
        isExpanded: false,
        selectedsubSkills: 0,
        subSkills: [{
            name: 'Core Java',
            isSelected: false
        }, {
            name: 'SubSkill2',
            isSelected: false
        }, {
            name: 'SubSkill3',
            isSelected: false
        }]
    }, {
        name: 'iOS Development',
        isSelected: false,
    }, {
        name: 'Networking',
        isSelected: false,
        isExpanded: false,
        selectedsubSkills: 0,
        subSkills: [{
            name: 'SubSkill1',
            isSelected: false
        }, {
            name: 'SubSkill2',
            isSelected: false
        }, {
            name: 'SubSkill3',
            isSelected: false
        }]
    }, {
        name: 'Web Development',
        isSelected: false,
        selectedsubSkills: 0,
        subSkills: [{
            name: 'HTML5',
            isSelected: false
        }, {
            name: 'CSS3',
            isSelected: false
        }, {
            name: 'JavaScript',
            isSelected: false
        }, {
            name: 'JQuery',
            isSelected: false
        }, {
            name: 'PHP',
            isSelected: false
        }]
    }];

  $scope.skillClick = function(skill) {

        if (skill.subSkills) {
            skill.isExpanded = !skill.isExpanded;

            if (skill.selectedSubSkills > 0) {
                skill.isSelected = true;
            } else {
                skill.isSelected = false;
            }
            /* In Ionic, resize is slow when ion-content changes.
              Refer : http://ift.tt/1M22uYp */
            if ($scope.isIonicApp === true) {
                var ionicScrollDelegate = $injector.get('$ionicScrollDelegate');
                ionicScrollDelegate.resize(); // Resize view
            }
        }
    };

});